CSS制作尖角

来源：互联网发布：北欧女神知乎编辑：程序博客网时间：2024/04/29 20:31

1.原理：利用border属性和两个元素的叠加，如下到第三幅是利用border做出了三角形，第四附图又做一个白色的小三角形叠加上去，使造成空心的效果。

css制作尖角

效果：

css制作尖角

2.代码
<!DOCTYPE html>

<html >

<head>

<title>css制作尖角</title>

</head>

<style>

body {

margin:50px 0 0 50px;

}

ul, li {

padding:0px;

list-style:none;

margin:0;

}

div {

padding:10px;

border:3px solid #1c7ecf;

position:relative;

margin:10px;

float:left;

width:150px;

height:100px;

}

p {

text-indent:2em;

}

.cusp01, .cusp02 {

position:absolute;

display:block;

height:0px;

}

#left_cusp {

}

#left_cusp .cusp01 {

left:-12px;

top:50px;

border-top:9px solid #fff;

border-bottom:9px solid #fff;

border-left:0px;

border-right:9px solid #1c7ecf;

}

#left_cusp .cusp02 {

left:6px;

top:-6px;

border-top:6px solid #1c7ecf;

border-bottom:6px solid #1c7ecf;

border-left:0px;

border-right:6px solid #fff;

}

#right_cusp {

}

#right_cusp .cusp01 {

right:-12px;

top:50px;

border-top:9px solid #fff;

border-bottom:9px solid #fff;

border-right:0px;

border-left:9px solid #1c7ecf;

}

#right_cusp .cusp02 {

right:6px;

top:-6px;

border-top:6px solid #1c7ecf;

border-bottom:6px solid #1c7ecf;

border-right:0px;

border-left:6px solid #fff;

}

#top_cusp {

}

#top_cusp .cusp01 {

left:100px;

top:-12px;

border-top:0px;

border-bottom:9px solid #1c7ecf;

border-right:9px solid #fff;

border-left:9px solid #fff;

}

#top_cusp .cusp02 {

left:-6px;

top:6px;

border-top:0px;

border-bottom:6px solid #fff;

border-right:6px solid #1c7ecf;

border-left:6px solid #1c7ecf;

}

#bottom_cusp {

}

#bottom_cusp .cusp01 {

left:100px;

bottom:-12px;

border-bottom:0px;

border-top:9px solid #1c7ecf;

border-right:9px solid #fff;

border-left:9px solid #fff;

}

#bottom_cusp .cusp02 {

left:-6px;

bottom:6px;

border-bottom:0px;

border-top:6px solid #fff;

border-right:6px solid #1c7ecf;

border-left:6px solid #1c7ecf;

}

</style>

<body>

<ul>

<li>ffffffffffffffff</li>

</ul>

<ul>

<li>ffffffffffffffff</li>

</ul>

<ul>

<li>ffffffffffffffff</li>

</ul>

<ul>

<li>ffffffffffffffff</li>

</ul>

</body>

</html>CSS制作尖角

0 0