Maison > Article > interface Web > Comment créer des angles vifs en CSS3
Comment créer des angles vifs en CSS3
- 藏色散人original
- 2020-12-11 09:58:152990parcourir
Comment créer des angles vifs en CSS3 : créez d'abord un exemple de fichier HTML ; puis déterminez la position des angles vifs et enfin, définissez les attributs du div spécifié sur "top:6px;left:-3px; border-top:0px ;border-bottom..." pour obtenir l'effet de coin net.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur thinkpad t480.
Recommandé : "Tutoriel vidéo CSS"
Les coins pointus sont au top
Rendu :
Code :
<html>
<head>
<title>尖角p</title>
<style type="text/css">
#top
{
width:400px;
height:250px;
border:3px solid; /* 边框宽度为3px */
position:relative;
}
.sp1,.sp2
{
display:block;
height:0px;
width:0px;
position:absolute;
font-size:0;
line-height:0;
}
.sp1
{
top:-9px; /* 它的绝对值加上span的边框宽度等于p边框宽度的5倍 */
left:40px; /* 它来确定尖角的位置 */
border-top:0px;
border-bottom:6px solid black; /* 注意颜色的变化 */
border-right:6px solid white;
border-left:6px solid white;
}
.sp2
{
top:6px; /* 是自身边框宽度的2倍 */
left:-3px; /* 是自身边框宽度的-1倍 */
border-top:0px;
border-bottom:3px solid white;
border-right:3px solid black;
border-left:3px solid black;
}
</style>
</head>
<body>
<p id="top">
<span class="sp1">
<span class="sp2"></span>
</span>
</p>
</body>
</html>
Les coins pointus sont en dessous
Rendu :
Code :
<html>
<head>
<title>尖角p</title>
<style type="text/css">
#bottom
{
width:400px;
height:250px;
border:3px solid; /* 边框宽度为3px */
position:relative;
}
.sp1,.sp2
{
display:block;
height:0px;
width:0px;
position:absolute;
font-size:0;
line-height:0;
}
.sp1
{
bottom:-9px; /* 它的绝对值加上span的边框宽度等于p边框宽度的5倍 */
left:40px; /* 它来确定尖角的位置 */
border-bottom:0px;
border-top:6px solid black; /* 注意颜色的变化 */
border-right:6px solid white;
border-left:6px solid white;
}
.sp2
{
bottom:6px; /* 是自身边框宽度的2倍 */
left:-3px; /* 是自身边框宽度的-1倍 */
border-bottom:0px;
border-top:3px solid white;
border-right:3px solid black;
border-left:3px solid black;
}
</style>
</head>
<body>
<p id="bottom">
<span class="sp1">
<span class="sp2"></span>
</span>
</p>
</body>
</html>
Le coin pointu est à gauche
Rendu :
Code :
<html>
<head>
<title>尖角p</title>
<style type="text/css">
#left
{
width:400px;
height:250px;
border:3px solid; /* 边框宽度为3px */
position:relative;
}
.sp1,.sp2
{
display:block;
height:0px;
width:0px;
position:absolute;
font-size:0;
line-height:0;
}
.sp1
{
left:-9px; /* 它的绝对值加上span的边框宽度等于p边框宽度的5倍 */
top:40px; /* 它来确定尖角的位置 */
border-left:0px;
border-top:6px solid white; /* 注意颜色的变化 */
border-right:6px solid black;
border-bottom:6px solid white;
}
.sp2
{
left:6px; /* 是自身边框宽度的2倍 */
top:-3px; /* 是自身边框宽度的-1倍 */
border-left:0px;
border-top:3px solid black;
border-right:3px solid white;
border-bottom:3px solid black;
}
</style>
</head>
<body>
<p id="left">
<span class="sp1">
<span class="sp2"></span>
</span>
</p>
</body>
</html>
Le coin pointu est à droite
Rendu :
Code :
<html>
<head>
<title>尖角p</title>
<style type="text/css">
#right
{
width:400px;
height:250px;
border:3px solid; /* 边框宽度为3px */
position:relative;
}
.sp1,.sp2
{
display:block;
height:0px;
width:0px;
position:absolute;
font-size:0;
line-height:0;
}
.sp1
{
right:-9px; /* 它的绝对值加上span的边框宽度等于p边框宽度的5倍 */
top:40px; /* 它来确定尖角的位置 */
border-right:0px;
border-top:6px solid white; /* 注意颜色的变化 */
border-bottom:6px solid white;
border-left:6px solid black;
}
.sp2
{
right:6px; /* 是自身边框宽度的2倍 */
top:-3px; /* 是自身边框宽度的-1倍 */
border-right:0px;
border-top:3px solid black;
border-bottom:3px solid black;
border-left:3px solid white;
}
</style>
</head>
<body>
<p id="right">
<span class="sp1">
<span class="sp2"></span>
</span>
</p>
</body>
</html>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：Puis-je changer la couleur d’une image en utilisant CSS ?Article suivant：Puis-je changer la couleur d’une image en utilisant CSS ?