html 形状div,HTML+CSS入门 CSS各种形状的div样式详解

本篇教程介绍了HTML+CSS入门 CSS各种形状的div样式详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

shape

.parent{

position:relative;width:100px;height:100px;

}

.rect{

width: 100px;

height: 100px;

background: red;

line-height: 100px;

text-align: center;

color: white;

}

.circle{

width: 100px;

height: 100px;

background: red;

line-height: 100px;

text-align: center;

color: white;

border-radius: 50%;

}

.ellipse{

width: 100px;

height: 50px;

background: red;

line-height: 50px;

text-align: center;

color: white;

border-radius: 50%;

}

.semi-circle{

width: 100px;

height: 50px;

background: red;

line-height: 50px;

text-align: center;

color: white;

border-radius: 200px 200px 0 0;

}

.sector{

width: 100px;

height: 100px;

background: red;

line-height: 100px;

text-align: center;

color: white;

border-radius: 200px 0 0 0;

}

.arc{

width: 100px;

height: 100px;

background: red;

line-height: 100px;

text-align: center;

color: white;

border-radius: 100px 0 100px 0;

}

.triangle{

width: 0px;

height: 0px;

border-width: 100px;

border-style: solid;

border-top-color: black;

border-bottom-color: green;

border-left-color: yellow;

border-right-color: gray;

}

.arrow{

width: 0px;

height: 0px;

border-width: 100px;

border-style: solid;

border-top-color: black;

border-bottom-color: transparent;

border-left-color: transparent;

border-right-color: transparent;

}

.triangle2{

width: 50px;

height: 50px;

border-width: 50px;

border-style: solid;

border-top-color: black;

border-bottom-color: green;

border-left-color: transparent;

border-right-color: transparent;

}

.triangle3{

width: 100px;

height: 100px;

border-width: 10px;

border-style: solid;

border-top-color: black;

border-bottom-color: green;

border-left-color: transparent;

border-right-color: transparent;

border-radius: 50%;

}

.triangle4{

width: 50px;

height: 50px;

border-width: 10px;

border-style: solid;

border-top-color: black;

border-bottom-color: green;

border-left-color: red;

border-right-color: transparent;

border-radius: 50%;

clip: rect(0 50px 70px 0);

left: 0;

top: 0;

position: absolute;

}

.triangle5{

width: 100px;

height: 100px;

border-top: 10px solid black;

border-radius: 100px;

}

正方形

div{

width: 100px;

height: 100px;

background: red;

line-height: 100px;

text-align: center;

color: white;

}

圆形

.circle{

width: 100px;

height: 100px;

background: red;

line-height: 100px;

text-align: center;

color: white;

border-radius: 50%;

}

椭圆

.ellipse{

width: 100px;

height: 50px;

background: red;

line-height: 50px;

text-align: center;

color: white;

border-radius: 50%;

}

半圆

.semi-circle{

width: 100px;

height: 50px;

background: red;

line-height: 50px;

text-align: center;

color: white;

border-radius: 100px 100px 0 0;

}

扇形

.sector{

width: 100px;

height: 100px;

background: red;

line-height: 100px;

text-align: center;

color: white;

border-radius: 200px 0 0 0;

}

弧形

.arc{

width: 100px;

height: 100px;

background: red;

line-height: 100px;

text-align: center;

color: white;

border-radius: 100px 0;

}

三角形

.triangle{

width: 0px;

height: 0px;

border-width: 100px;

border-style: solid;

border-top-color: black;

border-bottom-color: green;

border-left-color: yellow;

border-right-color: gray;

}

三角形

.arrow{

width: 0px;

height: 0px;

border-width: 100px;

border-style: solid;

border-top-color: black;

border-bottom-color: transparent;

border-left-color: transparent;

border-right-color: transparent;

}

.triangle2{

width: 50px;

height: 50px;

border-width: 50px;

border-style: solid;

border-top-color: black;

border-bottom-color: green;

border-left-color: transparent;

border-right-color: transparent;

}

.triangle3{

width: 50px;

height: 50px;

border-width: 50px;

border-style: solid;

border-top-color: black;

border-bottom-color: green;

border-left-color: transparent;

border-right-color: transparent;

border-radius: 50%;

}

.triangle4{

width: 50px;

height: 50px;

border-width: 10px;

border-style: solid;

border-top-color: black;

border-bottom-color: green;

border-left-color: red;

border-right-color: transparent;

border-radius: 50%;

clip: rect(0 50px 70px 0);

left: 0;

top: 0;

position: absolute;

}

.triangle5{

width: 100px;

height: 100px;

border-top: 10px solid black;

border-radius: 100px;

}

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！