三角形
倒三角
<style type="text/css" media="screen"> .div1{ width: 0; height: 0; border: 100px solid; <!--上右下左--> border-color: red transparent transparent transparent; } </style>
<div class="div1"></div>
右三角
<style type="text/css" media="screen"> .div2{ width: 0; height: 0; border: 100px solid; <!--上右下左--> border-color: transparent transparent transparent red; } </style>
<div class="div2"></div>
等边倒三角
<style type="text/css" media="screen"> .div3{ width: 0; height: 0; border: solid; border-color: red transparent transparent transparent; border-width: calc(100px * 1.732) 100px 0px 100px; } </style>
<div class="div3"></div>
等边右三角行
<style type="text/css" media="screen"> .div4{ width: 0; height: 0; border: solid; border-color: transparent transparent transparent red; border-width: 100px 0px 100px calc(100px * 1.732); margin: 50px auto 0; } </style>
<div class="div4"></div>