尖锐的一侧角

Question

试图使菜单边的尖角，我使用了 border-radius

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

但它没有给锐角。但我不想要那个激进的部分。我也试过做一个三角形，然后把它和那个条放在一起，但我认为这不是最好的解决方案，可能与之前和之后有关。

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

<div></div>

Answer 2

响应pseudo-element

为避免在需要响应式元素时破坏设计，您可以使用 calc() to set the width with CSS. Check Can I Use for browser support and this 作为工作示例。当您更改 .block 的宽度时，您会看到 pseudo-elements 也在调整大小。

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

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

尖锐的一侧角

Sharp one side corner

html

css

css-shapes

响应pseudo-element