css 按钮 尖角 |css 输入框focus

偶是一个带有尖角的按钮.button {
background-color: #4caf50;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.button::before {
content: '';
position: absolute;
top: 0;
right: 0;
border-width: 0 20px 20px 0;
border-style: solid;
border-color: transparent #3f8c40;
}

在这个例子中，大家使用了一个伪元素::before来创建一个类似箭头的尖角。这个元素的大小和位置用top和right属性控制，而尖角的样式用border属性控制。大家也可以改变尖角的颜色和形状，以适应你的设计需求。

最后要注意的是，在创建这种尖角效果时，大家需要将position属性设置为relative，并用overflow属性控制伪元素的溢出部分不被隐藏。这是因为大家所创建的尖角是基于按钮本身的位置进行定位的。

如果你的设计需要更多的尖角变体，可以在网上搜索更多实现方式。记住，在设计中尖角是一个潜在的细节，它的作用可能只是让按钮变得更好看一点。