使用 css 制作自定义形状答案

【问题标题】：making a custom shape using css使用 css 制作自定义形状
【发布时间】：2019-09-13 03:12:58
【问题描述】：

我正在尝试使用 CSS3 来使用 css3 制作这个自定义形状。

_{（来源：mattieumoreau.com）}

我想在上面添加文字，红色是我网站的背景（它将是背景图片，所以它必须是透明的。

非常感谢您的帮助

【问题讨论】：

标签： css background-color css-shapes shapes

【解决方案1】：

你可以使用

h1.elaborate{
    height:50px;
    line-height:50px;
    margin:0 50px;/*50 being the width of the arrows x2*/
    padding:0 25px;
    background:black;
    color:white;
    position:relative;
    box-sizing:border-box;
}
h1.elaborate:before,
h1.elaborate:after{
    content:'';
    position:absolute;
    width:0;
    height:0;
    border:25px solid black;
    border-left-color:transparent;
    border-right-color:transparent;
}
h1.elaborate:before{left:-25px;}
h1.elaborate:after{right:-25px;}

并将其用作

<h1 class="elaborate">I am the elaborate title</h1>

http://dabblet.com/gist/9209450的演示

（将鼠标悬停在http://dabblet.com/gist/9209563 的标题上以查看其工作原理的某种解释）

【讨论】：

【解决方案2】：

给你：

HTML：

<div class="container">
    <div class="tl"></div>
    <div class="tr"></div>
    <div class="br"></div>
    <div class="bl"></div>
</div>

CSS：

.container {
    width: 60%;
    height: 100px;
    margin: 0 auto;
    position: relative;
    background-color: #000;
}

.tl {
    top: 0;
    left: -25px;
    position: absolute;
    border-top: 25px solid #000;
    border-left: 25px solid transparent;
    border-right: 25px solid #000;
    border-bottom: 25px solid transparent;
}
.tr {
    top: 0;
    right: -25px;
    position: absolute;
    border-top: 25px solid #000;
    border-left: 25px solid #000;
    border-right: 25px solid transparent;
    border-bottom: 25px solid transparent;
}
.br {
    bottom: 0;
    right: -25px;
    position: absolute;
    border-top: 25px solid transparent;
    border-left: 25px solid #000;
    border-right: 25px solid transparent;
    border-bottom: 25px solid #000;     
}
.bl {
    bottom: 0;
    left: -25px;
    position: absolute;
    border-top: 25px solid transparent;
    border-left: 25px solid transparent;
    border-right: 25px solid #000;
    border-bottom: 25px solid #000;
}

这是一个演示：FIDDLE

Example 2带有文字和红色背景

【讨论】：