CSS--擬似要素による三角形化
1945 ワード
<style type="text/css">
.tri_top, .tri_right, .tri_bottom, .tri_left{
width: 150px;
height: 100px;
background: #CCCCCC;
border-radius: 8px;
margin: 50px;
position: relative;
}
/* */
.tri_top:before{
content: "";
border : 10px solid transparent;
border-bottom-color: red;
position: absolute;
top: -20px;
left: 65px;
}
/* */
.tri_right:before{
content: "";
border : 10px solid transparent;
border-left-color: yellow;
position: absolute;
top: 40px;
left: 150px;
}
/* */
.tri_bottom:before{
content: "";
border : 10px solid transparent;
border-top-color: blue;
position: absolute;
top: 100px;
left: 70px;
}
/* */
.tri_left:before{
content: "";
border : 10px solid transparent;
border-right-color: green;
position: absolute;
top: 40px;
left: -20px;
}
</style>
<div class="tri_top"/> <!-- -->
<div class="tri_right"/> <!-- -->
<div class="tri_bottom"/> <!-- -->
<div class="tri_left"/> <!-- -->
</code></pre>
<p> </p>
</div>
</div>
</div>
</div>