使用css製作自定義形狀

Question

我正在嘗試使用CSS3來使用css3製作此自定義形狀。

shape http://mattieumoreau.com/wp-content/uploads/2014/02/forme.jpg

我想在其中添加文本，而紅色是我的網站的背景（這將是一個背景圖像，所以它必須是透明的。

非常感謝您的幫助

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懸停在標題看到了幾分它是如何工作的解釋）

Answer 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文字和紅色背景