Home > Article > Web Front-end > Use css to implement a transparent triangle special effect code

Use css to implement a transparent triangle special effect code

零下一度Original: 2017-04-28 10:53:081930browse

This article mainly teaches you to use css to draw transparent triangles. Drawing triangles with css is very simple. How to draw transparent triangles. This article will solve this problem for you. Interested friends can refer to

css Implement the following image style, I can’t remember the specific pixel values, it’s easy to set up, html code (2014 Baidu autumn recruitment interview question):

C# CodeCopy the content to the clipboard

##78d3378c5f3e7b2049ec1a08a55462bf94b3e26ee717c64999d7867364b1b4a3

##Analysis: The key to this style is that after the triangle and the triangle are implemented, it becomes a triangle with only a border. Make use of the :after and :before pseudo-elements of the element (please automatically ignore lower versions of IE).

Idea: First implement a square, then implement a triangle layer, place it in the upper right corner, and then implement a transparent triangle to cover the inside of the black triangle, leaving only the border.

XML/HTML Code

Copy content to clipboard

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=utf-8>  
<title>demo</title>  
</head>  
<style>  
#demo{   
  width:100px;    
  height:100px;    
  border:2px solid #000;   
}   
#demo:before{   
  content:&#39;&#39;;    
  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;   
}   
#demo:after{   
  content:&#39;&#39;;    
  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;   
}   
  
</style>  
<body>  
   <p id=&#39;demo&#39;></p>  
    <script>  
  
    </script>  
</body>

The above is the detailed content of Use css to implement a transparent triangle special effect code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Three small special effects that are easy to master - text hollowing, transparency, and shadow effectsNext article：Three small special effects that are easy to master - text hollowing, transparency, and shadow effects

See more

Use css to implement a transparent triangle special effect code

Related articles