Home > Developer > Web Develop
Use Div and CSS to create triangle effects:
This section describes how to use the div and CSS to achieve the triangle effect, although it looks like the table is magical, but the principle is very simple.
The code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">#box{width:0px;Height:0px;Border:40px Solid White;Border-top-color:#930;Border-bottom-color:#0C3;Border-left-color:#FC0;Border-right-color:#009;Line-height:0px;}</style></Head><Body><DivID= "box"></Div></Body></HTML>
In fact, the triangle is the use of the div's border "extrusion", the border due to the use of different colors, so it is very good to distinguish, if only one azimuth of the triangle, you can set the border color or delete the border can be.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=12680
For more information, refer to: http://www.softwhy.com/divcss/
Make triangle effects with div and CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
