△Make a triangle

LastModified
Category CSS

概要

Use border to make triangles

HTML


<a id="tri01"></a>

#tri01 {
    display: block;
	width: 0;
	height: 0;
    border: 2rem solid transparent;
	border-top-color: red;
}

Triangles


<a id="tri02"></a>

#tri02 {
    display: block;
	width: 0;
	height: 0;
    border: 2rem solid transparent;
    /*上*/
	border-top-color: blue;
    /*左*/
	border-left-color: green;
    /*右*/
	border-right-color: yellow;
    /*下*/
	border-bottom-color: red;
}

Example

  • example01
  • example02
  • example03

<ul id="tri03">
    <li>example01</li>
    <li>example02</li>
    <li>example03</li>
</ul>

#tri03 li{
    list-style: none;
}
#tri03 li:before{
    content: "";
    display: inline-block;
    border: 0.4em solid transparent;
	border-left-color: red;
    vertical-align: middle;
}