css - 使用 css 制作自定义形状

Question

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

_{(来源:mattieumoreau.com)}

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

非常感谢你的帮助

Answer 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 以查看其工作原理的某种解释)