尖锐的一侧角

Question

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

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

但它没有给出尖锐的角落。但我不想要那个激进的部分。我也尝试制作一个三角形，然后用它来定位它，但我认为它不是最好的解决方案可能是之前和之后的一些事情。

Answer 1

您可以使用css 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; } pseudo-elements来实现这一目标：

＆＃13;

＆＃13;

<div></div>

＆＃13;

DB::select()

＆＃13;

＆＃13;

＆＃13;

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

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