Maison > interface Web > tutoriel HTML > HTML border CSS输出三角形_html/css_WEB-ITnose

HTML border CSS输出三角形_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:54:41
original
1252 Les gens l'ont consulté

有下面一段html代码:

    <meta charset="UTF-8">    <title>Document</title>    <style>    .triangle_up{  height:0px; width:0px;  border-bottom:50px solid red;  border-left:50px solid transparent  ;  border-right:50px solid transparent  ;}    </style> <div class="triangle_up"></div>   
Copier après la connexion

乍一看很不解,但是效果是这样的:



把CSS改一改:

.triangle_up{  height:0px; width:0px;  border-bottom:50px solid red;  border-left:50px solid   ;  border-right:50px solid   ;}
Copier après la connexion



还是晕,再把宽高改一改:


宽高再改一改:



瞬间恍然大悟。

块的宽高都为0,又巧妙设置了透明,所以看起来就是一个三角形!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal