AlisaClass 2019-11-04
代码:
<html> <body> <style> .div1{ width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #bbbbbb; } .div2{ width: 0; height: 0; border-bottom: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-top: 40px solid #bbbbbb; } </style> <div class="div1"></div> <div class="div2"></div> </body> </html>
代码:
<html> <body> <style> .div1{ width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #bbbbbb; } .div2{ width: 0; height: 0; border-bottom: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-top: 40px solid red; } .div3{ width: 0; height: 0; border-bottom: 40px solid transparent; border-top: 40px solid transparent; border-right: 40px solid transparent; border-left: 40px solid black; } .div4{ width: 0; height: 0; border-bottom: 40px solid transparent; border-left: 40px solid transparent; border-top: 40px solid transparent; border-right: 40px solid burlywood; } </style> <div class="div1"></div> <div style="margin: 40px;"></div> <div class="div2"></div> <div style="margin: 40px;"></div> <div class="div3"></div> <div style="margin: 40px;"></div> <div class="div4"></div> </body> </html>
效果图:
代码:
<html> <body> <style> .circle{ width: 100px; height: 100px; background-color: #a72525; border-radius: 100px; } .circle1{ width: 100px; height: 100px; background-color: #ffffff; border: 3px solid #a72525; border-radius: 100px; } </style> <div class="circle"></div> <div style="margin-top: 40px;"></div> <div class="circle1"></div> <div style="margin-top: 40px;"></div> <div class="circle1"></div> </body> </html>
效果图: