CSS角锐化

Question

我想知道是否有可能使用一种简单而干净的纯CSS方法来获得对象的尖角。目前我正在使用像这样的角落

.main navigation {
background-color: #14377d;
padding-right: 10px;
padding-left: 10px;
border-right: solid #2d71ba;
border-bottom-right-radius: 25px 25px;
width: 134px;
line-height: 25px;
text-align: left;
}

但这会使角落变圆。我想要的是右下角切割。示例：

感谢大家花时间阅读本文，

Sjoerd

Answer 1

我可能会使用clip-path和polygon()：

＆＃13;

＆＃13;

div {
  background-color: #2C2F33;
  height: 200px;
  width: 300px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 80% 100%, 0 100%);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

基本上polygon()的工作原理是，您可以定义每个逗号与x-y位置分隔：polygon(x1 y1, x2 y2, ...)。使用100％作为完整给定宽度或高度的百分比，您可以制作任何线性形状。

Answer 2

您可能觉得这种技术对您很有用：Fiddle Example。它基于polygon函数和clip-path属性。

Answer 3

我最终使用

polygon(100% 0, 100% 75%, 90% 100%, 0 100%, 0 0);

谢谢！让我的网站导航接近我想要的地方！