Maison > interface Web > tutoriel HTML > 带三角缺口的边框_html/css_WEB-ITnose

带三角缺口的边框_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2016-06-24 11:53:38
original
1538 Les gens l'ont consulté

以前看漫画的时候如果有对话内容,一般会有一个边框,然后带着一个三角从说话人的身上引出。类似下图这样:

应该有很多方法来实现,这里提供的办法就是创造一个边框,然后用两个三角覆盖。效果如下:

为了方便理解,我给body加了个黑色背景,是这样:

代码如下:

<!doctype html><html><head><meta charset="UTF-8"><title>带三角缺口的边框</title><style>.out {    display:block;    width:0;    height:0;    border-left:6px dashed transparent;    border-right:6px dashed transparent;    border-top:0;    border-bottom:7px solid #ccc;    position:relative;    top:-7px;    left:50%;}.inner {    position:absolute;    border-left:6px dashed transparent;    border-right:6px dashed transparent;    border-top:0;    border-bottom:7px solid #fff;    left:-6px;    top:2px;}div {    position:relative;    margin:0 auto;    width:80px;    height:100px;    border:1px solid #ccc;    border-radius:5px;}    </style></head><body><div><span class="out">    <span class="inner"></span></span></div></body></html>
Copier après la connexion

 

Étiquettes associées:
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