<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>用css画三角形</
title
>
<
style
>
.container {
width: 500px;
margin: 100px auto;
}
.triangle {
height: 0;
width: 0;
border: 50px solid transparent;
border-left-color: red;
}
.arrow-1 {
width: 50px;
height: 50px;
border: 1px solid transparent;
border-top-color: red;
border-right-color: red;
transform: rotate(45deg);
}
.arrow-2 {
position: relative;
height: 0;
width: 0;
border: 50px solid transparent;
border-left-color: red;
}
.arrow-2::before {
content: '';
position: absolute;
/* 左移动多一点像素来错开 */
left: -55px;
top: -50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: white;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen;
}
.sector {
width: 100px;
height: 100px;
border-radius: 100px 0 0 0;
background-color: blue;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
div
class
=
"triangle"
></
div
>
<
div
class
=
"arrow-1"
></
div
>
<
div
class
=
"arrow-2"
></
div
>
<
div
class
=
"circle"
></
div
>
<
div
class
=
"sector"
></
div
>
</
div
>
</
body
>
</
html
>