How to implement CSS to draw transparent triangles

This article mainly teaches you to use CSS to draw a transparent triangle, CSS drawing triangle is very simple, how to draw a transparent triangle, this article for everyone to solve this problem, interested in small partners can refer to

CSS implementation style, the specific pixel values can't remember, very good settings, HTML code (201,400 degrees autumn interview):

<p id= "Demo" ></p>

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.

<! DOCTYPE html> 
 The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!