如何在CSS中創建此形狀？

-2

我想創建一個形狀，但純粹在CSS中。可能嗎？怎麼樣？非常感謝， enter image description here 如何在CSS中創建此形狀？

2014-07-05 Greg

看看這個：http://www.css3shapes.com/ – fiddler

是的，這只是三角形+矩形 – Uriil

感謝您的鏈接，但這種形狀似乎並沒有在那裏，所以我想這不是可能 – Greg

#shape 
{ 
    width: 100px; 
    height: 0; 
    border-top: solid 40px blue; 
    border-left: solid 40px transparent; 
}

演示：

來源

2014-07-05 09:35:40 jcaron

這是一個很好的解決方案，非常感謝！ – Greg

試試這個：

.shape { 
    width: 200px; 
    height: 50px; 
    background: #000; 
    margin: 50px; 
    position: relative; 
} 

.shape:before { 
    display: block; 
    content: ""; 
    height: 0; 
    width: 0; 
    border: 25px solid #f00; 
    border-bottom: 25px solid transparent; 
    border-left: 25px solid transparent; 
    position: absolute; 
    left: -50px; 
}

P.S：貯存紅色三角形用於演示目的

Demo

來源

2014-07-05 09:36:35 imbondbaby

<head> 
<style> 


h1.elaborate{ 
    height:50px; 
    line-height:50px; 
    margin:0 150px;/*15 being the width of the arrows*/ 
    padding:0 55px; 
    background:red; 
    color:white; 
    position:relative; 
    box-sizing:border-box; 
} 
h1.elaborate:before{ 
    content:''; 
    position:absolute; 
    height:50px; 
    margin-left:-25px; 
    border-top: 50px solid red; border-left: 50px solid transparent; 

} 
h1.elaborate:before{left:-25px;} 

</style> 



</head> 

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

來源

2014-07-05 09:43:30 Farshad

如何在CSS中創建此形狀？

回答

相關問題