Home > Developer > Web Develop
How to use CSS to achieve triangle effects:
recommendation : As far as possible handwriting code, can effectively improve the learning efficiency and depth.
Sometimes we often find that some of the rectangles will appear triangular effect, it is very magical, of course, you can use the background image to achieve, here is a brief introduction of the effect of not using the background image. The code is as follows:
<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">. Parent{width:300px;Height:100px;margin:40px Auto;Background-color:Green;position:relative;}. Square{width:0px;Height:0px;Border-bottom:10px Solid White;Border-left:10px Solid White;Border-right:10px Solid Green;Border-top:10px Solid Green;position:Absolute; Left:-20px;Top:10px;}</style></Head><Body><Divclass= "Parent"> <Divclass= "Square"></Div></Div></Body></HTML>
The principle is very simple, perhaps the above code is not obvious enough, then see the following code example is at a glance.
<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">Div{width:0px;Height:0px;Border-bottom:10px Solid Green;Border-left:10px solid Blue;Border-right:10px solid Red;Border-top:10px solid Black;}</style></Head><Body><Div></Div></Body></HTML>
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=4650
For more information, refer to: http://www.softwhy.com/divcss/
How to use CSS to achieve triangle effects
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
