Comment dessiner des triangles transparents avec CSS-tutoriel CSS-php.cn

Comment dessiner des triangles transparents avec CSS

不言

Libérer： 2018-06-15 10:03:27

original

3058 Les gens l'ont consulté

Cet article vous apprend principalement à dessiner des triangles transparents en utilisant CSS. Dessiner des triangles avec CSS est très simple. Cet article résoudra ce problème pour vous. Les amis intéressés peuvent se référer à

. css Implémentez le style d'image suivant. Je ne me souviens pas des valeurs de pixels spécifiques. C'est facile à définir (Questions d'entretien de recrutement d'automne Baidu 2014) :

<p id="demo"></p>

Copier après la connexion

<🎜. >

Analyse : La clé de ce style est qu'une fois le triangle et le triangle implémentés, il devient un triangle avec seulement une bordure. Utilisez les pseudo-éléments :after et :before de l'élément (veuillez ignorer automatiquement les versions inférieures d'IE).

Idée : implémentez d'abord un carré, puis implémentez un calque de triangle, placez-le dans le coin supérieur droit, puis implémentez un triangle transparent pour couvrir l'intérieur du triangle noir, ne laissant que la bordure.

<!DOCTYPE html>  
<html lang="zh">  
<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>     
</html>

Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utilisez CSS3 pour dessiner des graphiques de base

Utilisez CSS3 pour obtenir un effet de retournement d'image

Analyse sur la différence entre l'utilisation de rgba et de l'opacité pour définir la transparence en CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!