Home > Developer > Web Develop
Use css to draw triangles and css to draw triangles
When we create a pop-up layer for an image, we can use css to show a small arrow in the pop-up layer.
Use div to demonstrate
div{ border:12px solid; berder-color:transparent green transparent transparent; height:0; width:0;}
In this way, a small triangle can be displayed.
When you draw a block with a thick border but a size of 0
A diagonal edge is formed when the horizontal border and the vertical border are connected.
The angle of the Oblique Edge varies according to the width of the two adjacent edges.
How to Use CSS to draw triangles, as shown in the figure? Background and CSS3 cannot be used.
<Style>. div1 {width: 0px; height: 0px; border-top: 200px solid black; border-left: 200px solid white ;}. div2 {width: 0px; height: 0px; border-top: 197px solid white; border-left: 197px solid transparent; position: relative; top:-199px; left: 2px ;}. div1: before {width: 200px; border-top: 1px solid black; position: relative; left:-200px; top:-1px; content: ""; display: block ;}. div1: after {height: 200px; border-right: 1px solid black; posit Ion: relative; left:-200px; top:-201px; content: ""; display: block ;} </style> <body> <div class = "div1"> </div> <div class = "div2"> </div> </body> you like to pack your bags. go...
FF is qualified, and other browsers debug it slowly.
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
