CSS 角锐化答案

【问题标题】：CSS Corner sharpenedCSS 角锐化
【发布时间】：2017-05-18 09:29:20
【问题描述】：

我想知道是否有可能有一种简单干净的纯 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

【问题讨论】：

标签： css cornerradius

【解决方案1】：

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

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

&lt;div&gt;&lt;/div&gt;

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

【讨论】：

我认为这确实可以解决问题，现在我必须使用百分比。谢谢！

【解决方案2】：

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

【讨论】：

【解决方案3】：

我最终使用了

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

谢谢！让我的网站导航靠近我想要的位置！

【讨论】：