Question

Image i need to create with css

我无法理解我应该如何用css创建这个。请帮助

Answer 1

在css中你要添加类。 HTML：

的CSS： .rounded {边界半径：25像素}

您甚至可以将每个角设置为不同的半径 CSS：四舍五入{25px 50px 30px 10px}

Answer 2

你在寻找什么是带状效果。
首先，你必须使用:: before和:: after伪元素来创建你需要的两个元素，三角形，并将它们绝对地放在主要内容中。
然后你必须用边界角度转换2个元素。

例如：

        .box {
            position:relative;
            width: 200px;
            height: 100px;
            margin: 10px auto 0;
            background-color: red;
        }
        .box::before {
            content: "";
            position: absolute;
            top: -10px;
            left: 0;
            border-width: 10px 10px 0px 0;
            border-color: transparent blue transparent transparent;
            border-style: solid;
        }
        .box::after {
            content: "";
            position: absolute;
            top: -10px;
            right: 0;
            border-width: 0px 10px 10px 0px;
            border-color: transparent transparent blue transparent;
            border-style: solid;
        }

<div class="box"></div>

在这里你可以找到一些关于css中三角形如何工作的例子： How do CSS triangles work?

如何用css创建折叠边

2 个答案: