【问题标题】：Sharp one side corner [duplicate]锋利的一侧角[重复]
【发布时间】：2016-04-15 12:16:22
【问题描述】：

尝试制作菜单边的尖角，我使用了 border-radius

.right-section-top-bar.row {
    background-color: #44d2ff;
    border-radius: 0 0 0 100px;
}

但它没有给尖锐的角落。但我不想要那个激进的部分。我也试着做一个三角形，然后用那个条定位它，但我认为它不是最好的解决方案，可能与之前和之后有关。

【问题讨论】：

检查stackoverflow.com/questions/10883963/…

标签： html css css-shapes

【解决方案1】：

你可以像这样使用 css :before pseudo-elements 来实现：

div:before {
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0px 40px 40px 0px;
  border-color: transparent #44d2ff transparent transparent;
  position: absolute;
  top: 0px;
  margin-left: -40px;
}

div {
  position: relative;
  left: 100px;
  width: 200px;
  height: 40px;
  background: #44d2ff;
}

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

【讨论】：

【解决方案2】：

响应式伪元素

为避免在您需要响应式元素时破坏您的设计，您可以使用calc() 通过 CSS 设置宽度。检查Can I Use 以获得浏览器支持，检查this 以获得工作示例。当您更改 .block 的宽度时，您会看到伪元素也在调整大小。

   .block {
      position:relative;
      height:300px;
      width: 300px;
      background: purple;
    }

    .block:before {
      content: "";
      border-top: 40px solid purple;
      border-left: 40px solid transparent;
      position: absolute;
      bottom: -40px;
    }

    .block:after {
        content: "";
        width: -webkit-calc(100% - 40px);
        width: -moz-calc(100% - 40px);
        width: calc(100% - 40px);
        height: 40px;
        background: purple;
        position: absolute;
        bottom: -40px;
        margin-left: 40px;
    }

再次阅读您的问题后，我发现这不是您正在寻找的解决方案，因为您的示例包含文本，但也许这对其他未来的项目有帮助。

【讨论】：