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;
}

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

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

舍尔德

Answer 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%);
}

<div></div>

基本上 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);

谢谢！让我在网站上的导航接近我想要的位置！

CSS 锐角

CSS Corner sharpened

css

cornerradius