Maison > Article > interface Web > Comment dessiner des triangles transparents avec CSS

Comment dessiner des triangles transparents avec CSS

不言original: 2018-06-15 10:03:273052parcourir

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>

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utilisation et différence entre l'attribut zoom et l'attribut scale en CSSArticle suivant：Utilisation et différence entre l'attribut zoom et l'attribut scale en CSS

Articles Liés

Voir plus