CSS3积累(4) 画三角形和对话框
2019-03-05 本文已影响0人
有一条大鱼
要求
- 单纯用css3实现画任意三角形
- 其实很简单，div块里，将width和height设为0；将border的四边分别设置不同的颜色，如效果图。
看到此你是否有一个大胆的想法~- 将想保留的三角形保持最开始的设置，而其他三个三角形都让其背景色为transparent即可；
- 同时为了保证三角形不占多余的位置，故保留的三角形的对顶角对应的border宽度需设置为0，效果如图。
- 绘制对话框
- 会画三角形了，那么就可以结合伪元素来绘制对话框了
代码
<html>
<head>
<title>CSS学习之路</title>
<meta http-equiv="Content-Type" content="text/html;" />
<meta charset="UTF-8">
<meta name="keywords" content="css 笔记" />
<meta name="description" content="shaoyuli的CSS3积累笔记" />
<style type="text/css">
/* 想要什么方向的三角形把其他的颜色改成transparent透明就好，同时为了不占多余的位置，需要把对顶角对应的border宽度设为0 如下sanjiao1*/
.sanjiao {
border-top: 50px solid #ccc;
border-left: 50px solid #0f0;
border-bottom: 50px solid #00f;
border-right: 50px solid #f00;
width: 0px;
height: 0px;
margin: 50px auto;
}
.sanjiao1 {
border-top: 50px solid transparent;
border-left: 0px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid #f00;
width: 0px;
height: 0px;
margin: 50px auto;
}
.dialog {
background: #6A6;
margin: 50px auto;
width: 300px;
height: 25px;
line-height: 25px;
padding: 10px;
border-radius: 0 6px 6px 6px;
color: #fff;
position: relative;
}
.dialog::before {
content: '';
border-left: 0px solid transparent;
border-top: 0px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #6A6;
position: absolute;
left: -10px;
top: 0px;
}
.dialog1 {
background: rgb(233, 119, 74);
margin: 50px auto;
width: 300px;
height: 25px;
line-height: 25px;
padding: 10px;
border-radius: 6px;
color: #fff;
position: relative;
}
.dialog1::after {
content: '';
border-left: 10px solid rgb(233, 119, 74);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 0px solid transparent;
position: absolute;
right: -10px;
}
</style>
</head>
<body>
<div class="sanjiao">
</div>
<div class="sanjiao1"></div>
<div class="dialog">Hello world!</div>
<div class="dialog1">I'm Shaoyu!</div>
</body>
</html>
效果
image.png
思考
如何画一个钝角三角形，不规则或者直角三角形呢？
Tips：同样是通过border的宽度来控制
