利用CSS中边框做出有意思的效果
2019-10-29 本文已影响0人
NisemonoC
一、三角形
1、代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{width:0;border-top:20px solid #fff;border-bottom:20px solid #9ff;border-left:20px solid #fff;border-right:20px solid #fff;}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、效果：
在这里插入图片描述
3、原理：
先将div宽度设为0，再用css给div加上四条边框（注意要分开增加），然后将上、左、右边框的颜色设置成背景同色即可。同理，如果要向下的三角形那么将下、左、右三条边框的颜色设置一下就可以了。
二、对话框
1、代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
p{width:0;float:left;margin-top:5px;
border-top:5px solid #fff;
border-bottom:5px solid #fff;
border-left:5px solid #fff;
border-right:5px solid #9f9;}
span{float:left;width:100px;height:20px;background:#9f9;
/* 这下面是美化、根据个人调整。 */
border-radius: 5px;font:8px/20px "";
text-indent:10px;color:#333;}
</style>
</head>
<body>
<div>
<p></p>
<span>这是一个对话框。</span>
</div>
</body>
</html>
2、效果
在这里插入图片描述
3、原理：
这里其实是第一个三角形和一个p标签拼合出来的效果，宽高大小都可以根据自己的需要调整。下面是步骤：
先将弄出的向左方向的三角形（border-right）和一个空标签放在一个div里，再用浮动让它们横向布局。接着利用margin-top调整三角形的位置，一般是边框多大就margin-top多少；
三、 吃豆人
1、代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{background:#000}
div{width:0;float:left;position:relative;
border-right:30px solid #000;
border-bottom:40px solid #ff0;
border-left:50px solid #ff0;
border-top:50px solid #ff0;
border-bottom-right-radius:40px;
border-bottom-left-radius:60px;
border-top-left-radius:60px;
border-top-right-radius:40px;
}
span{height:10px;width:10px;background:#000;position:absolute;left:-5px;top:-35px;border-radius:50%;}
p{float:left;background:#ff0;width:20px;height:20px;border-radius: 50%;margin:35px 15px 0 0;}
</style>
</head>
<body>
<div><span></span></div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>
2、效果：
在这里插入图片描述
3、原理：
先设一个div然后写上4条边框，按照上、右、下、左的顺序分别是50、30、40、50像素。再将右上和右下调成40像素就形成了吃豆人嘴的部分。然后把左下和左上设置60像素把屁股部分变圆。再利用定位元素设置吃豆人的眼睛就OK了。（虽然并没什么用）；
