如何在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中创建此形状？

回答

相关问题