Question

我想创建一个像CSS一样纯粹的形状。可能吗？怎么样？非常感谢， enter image description here

Answer 1

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

演示：http://jsfiddle.net/FTu6R/

Answer 2

试试这个：

 .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

Answer 3

<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>

如何在CSS中创建此形状？

3 个答案: