Home > Developer > Web Develop
CSS implementation style, the specific pixel values can't remember, very good settings, HTML code (201,400 degrees autumn interview):
<div id= "Demo" ></div>
Analysis: The key to this style is when triangles and triangles are implemented into triangles that have only a border. Take advantage of elements of: after and: Before pseudo-elements (please automatically ignore the low version IE).
Thought: The realization of a square, in the implementation of a triangular layer, placed in the upper right corner, and then implement a transparent triangle covering the interior of the black Triangle, leaving only the border.
1 <! DOCTYPE html> 2 {Ten width: 100px; Height: 100px; Border: 2px solid #000; 13}14 #demo: Before{Content:‘‘; Display: Block; Width: 0; Height: 0; Position: relative ; top : 10px ; left : 100px ; border-left : 9px solid #000 ; Border-top : 7px solid Transparent , Border-bottom : 7px solid transparent , + }26 #demo: After {content : ' ; display : Block ; width : 0 ; height : 0 ; Position : relative ; top : -2px ; left : 100px ; border-left : 7px solid # FFF border-top : 5px solid transparent ; Border-bottom : 5px solid transparent ; 37 }38 </style>40 <body>41 <div id= ' demo ' ></div>42 <script>43 </body>
Transparent triangles implemented by 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
