如何使用css创建折叠边缘答案

【问题标题】：How to create folded edges with css如何使用css创建折叠边缘
【发布时间】：2018-08-12 11:51:59
【问题描述】：

Image i need to create with css

我不明白我应该如何使用 css 创建它。请帮助

【问题讨论】：

你在哪里看到图片中的rounded？
如果仔细观察，会有一个圆形的折边
needreciept.com/receiptGenerator8/public/home
看到这个页面我需要创建这个黑色的div
我已经使用图像制作了这个页面，但这还不够好，因为它没有响应性。需要用 css 创建它。

标签： jquery twitter-bootstrap css bootstrap-4

【解决方案1】：

你想在css中添加类。 html:

CSS： .rounded{border-radius:25px}

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

【讨论】：

【解决方案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;
        }

&lt;div class="box"&gt;&lt;/div&gt;

您可以在此处找到一些有关 css 中的三角形如何工作的示例： How do CSS triangles work?

【讨论】：