之前写过一篇关于 border 如何实现一个三角形的方法,这一次,我们将在这个的基础上实现下面的效果:
关于尺寸方面,自己看着来就行,无所谓的;
步骤一:实现一个400*400的 红色1像素边框的div
<!doctype html>
<
html>
<
head>
<
meta
charset=
"utf-8"
>
<
title
>css 实现三角
</
title
>
<
style
>
.abc
{
width
:
300
px
;
height
:
300
px
;
border
:
1
px
solid red;
}
<
/
style
>
</
head>
<
body>
<
div
class=
"abc"
>
</
div
>
</
body>
</
html>
效果:
步骤二:在上面这个div内部,再添加两个100*100的div,并且设置宽度为零,高度为零,边框宽度50px;
<!doctype html>
<
html>
<
head>
<
meta
charset=
"utf-8"
>
<
title
>css 实现三角
</
title
>
<
style
>
.abc
{
width
:
300
px
;
height
:
300
px
;
border
:
1
px
solid red;
}
.t1
{
width
:
0
px
;
height
:
0
px
;
border
:
50
px
solid red;
}
.t2
{
width
:
0
px
;
height
:
0
px
;
border
:
50
px
solid green;
}
<
/
style
>
</
head>
<
body>
<
div
class=
"abc"
>
<
div
class=
"t1"></
div>
<
div
class=
"t2"></
div>
</
div
>
</
body>
</
html>
效果:
步骤三:我们给 t1 这个div设置:border-left:50px solid yellow;
<!doctype html>
<
html>
<
head>
<
meta
charset=
"utf-8"
>
<
title
>css 实现三角
</
title
>
<
style
>
.abc
{
width
:
300
px
;
height
:
300
px
;
border
:
1
px
solid red;
}
.t1
{
width
:
0
px
;
height
:
0
px
;
border
:
50
px
solid red;
border-left
:
50
px
solid yellow;
}
.t2
{
width
:
0
px
;
height
:
0
px
;
border
:
50
px
solid green;
}
<
/
style
>
</
head>
<
body>
<
div
class=
"abc"
>
<
div
class=
"t1"></
div>
<
div
class=
"t2"></
div>
</
div
>
</
body>
</
html>
效果:
步骤四:我们继续给 t1 设置:border-right-width:0px;
<!doctype html>
<
html>
<
head>
<
meta
charset=
"utf-8"
>
<
title
>css 实现三角
</
title
>
<
style
>
.abc
{
width
:
300
px
;
height
:
300
px
;
border
:
1
px
solid red;
}
.t1
{
width
:
0
px
;
height
:
0
px
;
border
:
50
px
solid red;
border-left
:
50
px
solid yellow;
border-right-width
:
0
px
;
}
.t2
{
width
:
0
px
;
height
:
0
px
;
border
:
50
px
solid green;
}
<
/
style
>
</
head>
<
body>
<
div
class=
"abc"
>
<
div
class=
"t1"></
div>
<
div
class=
"t2"></
div>
</
div
>
</
body>
</
html>
效果:
步骤五:我们继续设置 t1 border-top-color:transparent; border-bottom-color:transparent; 这样我们就实现了三角,
<!doctype html>
<
html>
<
head>
<
meta
charset=
"utf-8"
>
<
title
>css 实现三角
</
title
>
<
style
>
.abc
{
width
:
300
px
;
height
:
300
px
;
border
:
1
px
solid red;
}
.t1
{
width
:
0
px
;
height
:
0
px
;
border
:
50
px
solid red;
border-left
:
50
px
solid yellow;
border-right-width
:
0
px
;
border-top-color
:transparent;
border-bottom-color
:transparent;
}
.t2
{
width
:
0
px
;
height
:
0
px
;
border
:
50
px
solid green;
}
<
/
style
>
</
head>
<
body>
<
div
class=
"abc"
>
<
div
class=
"t1"></
div>
<
div
class=
"t2"></
div>
</
div
>
</
body>
</
html>
效果:
步骤六:我们再按照上面 t1 的步骤再将 t2 变成三角形;
<!doctype html>
<
html>
<
head>
<
meta
charset=
"utf-8"
>
<
title
>css 实现三角
</
title
>
<
style
>
.abc
{
width
:
300
px
;
height
:
300
px
;
border
:
1
px
solid red;
}
.t1
{
width
:
0
px
;
height
:
0
px
;
border
:
50
px
solid red;
border-left
:
50
px
solid yellow;
border-right-width
:
0
px
;
border-top-color
:transparent;
border-bottom-color
:transparent;
}
.t2
{
width
:
0
px
;
height
:
0
px
;
border
:
50
px
solid green;
border-left
:
50
px
solid yellow;
border-right-width
:
0
px
;
border-top-color
:transparent;
border-bottom-color
:transparent;
}
<
/
style
>
</
head>
<
body>
<
div
class=
"abc"
>
<
div
class=
"t1"></
div>
<
div
class=
"t2"></
div>
</
div
>
</
body>
</
html>
效果:
步骤七:为了让这两个三角移动,我们给abc这个父级div添加相对定位,给两个小三角添加绝对定位;
<!doctype html>
<
html>
<
head>
<
meta
charset=
"utf-8"
>
<
title
>css 实现三角
</
title
>
<
style
>
.abc
{
width
:
300
px
;
height
:
300
px
;
border
:
1
px
solid red;
position
:relative;
}
.t1
{
width
:
0
px
;
height
:
0
px
;
border
:
50
px
solid red;
border-left
:
50
px
solid yellow;
border-right-width
:
0
px
;
border-top-color
:transparent;
border-bottom-color
:transparent;
position
:absolute;
left
:
300
px
;
top
:
50
px
;
}
.t2
{
width
:
0
px
;
height
:
0
px
;
border
:
50
px
solid green;
border-left
:
50
px
solid yellow;
border-right-width
:
0
px
;
border-top-color
:transparent;
border-bottom-color
:transparent;
position
:absolute;
left
:
299
px
;
top
:
50
px
;
}
<
/
style
>
</
head>
<
body>
<
div
class=
"abc"
>
<
div
class=
"t1"></
div>
<
div
class=
"t2"></
div>
</
div
>
</
body>
</
html>
步骤八:我们已经看到两个div 已经合并在一起了,现在让靠左边的div变成白色:
<!doctype html>
<
html>
<
head>
<
meta
charset=
"utf-8"
>
<
title
>css 实现三角
</
title
>
<
style
>
.abc
{
width
:
300
px
;
height
:
300
px
;
border
:
1
px
solid red;
position
:relative;
}
.t1
{
width
:
0
px
;
height
:
0
px
;
border
:
50
px
solid red;
border-left
:
50
px
solid yellow;
border-right-width
:
0
px
;
border-top-color
:transparent;
border-bottom-color
:transparent;
position
:absolute;
left
:
300
px
;
top
:
50
px
;
}
.t2
{
width
:
0
px
;
height
:
0
px
;
border
:
50
px
solid green;
border-left
:
50
px
solid
#fff
;
border-right-width
:
0
px
;
border-top-color
:transparent;
border-bottom-color
:transparent;
position
:absolute;
left
:
299
px
;
top
:
50
px
;
}
<
/
style
>
</
head>
<
body>
<
div
class=
"abc"
>
<
div
class=
"t1"></
div>
<
div
class=
"t2"></
div>
</
div
>
</
body>
</
html>
效果:
(为了清晰表明每一步,css样式未优化,请自行优化)