知识点：1、 :before 2、transparent 3、border在元素宽高为0的情况下设置border的实现效果
一、:before 是在元素的前面添加内容，内容可以是（任何元素？）也可以是添加一个图片
类似下面的这种：h1:before
{
content:url(logo.gif);
}
可以给h1:before 设置宽高等属性
div::before{content:' ';
width:0px;
height:0px;
position:absolute;
left:-12px;
top:50%;
-webkit-transform:translate(0px,-50%);
border:6px solid rgba(0,0,0,0.7);
border-color:transparent rgba(0,0,0,0.7) transparent transparent
}
二、transparent 用来设置成透明的
颜色透明，一开始是用css画三角形用到；
border-left:10px solid red;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
这样久能得到一个指向右的三角形了。宽高设为0。
三、border 块级元素设置宽均为0的时候，设置分别设置border为不同颜色展示的效果是这样子的
div {
width:0;
height:0;
border-top: 10px solid red;
border-left: 10px solid yellow;
border-right: 10px solid green;
border-bottom: 10px solid pink;
border:6px solid;
/* border-color: transparent rgba(0,0,0,0.7) transparent transparent */
}
以下是最终想实现的对话框的效果
<body>
<div>我是内容我是内容我是内容</div>
</body>
<style>
div{width:300px;
background-color:rgba(0,0,0,0.7);
color:#fff;
font-family:'Microsoft YaHei';
text-align:center;
padding:5px;
margin:100px auto;
position:relative
}
div::before{content:' ';
width:0px;
height:0px;
position:absolute;
left:-12px;
top:50%;
-webkit-transform:translate(0px,-50%);
border:6px solid rgba(0,0,0,0.7);
border-color:transparent rgba(0,0,0,0.7) transparent transparent
}
</style>
<script>
</script>
<style>
/* div {
width:0;
height:0;
border-top: 100px solid red;
border-left: 100px solid yellow;
border-right: 100px solid green;
border-bottom: 100px solid pink;
border:6px solid rgba(0,0,0,0.7);
border-color: transparent rgba(0,0,0,0.7) transparent transparent
} */
</style>
网友评论