带边框的小箭头.png
<div class="border-triangle-right"></div>
<style>
.border-triangle-right {
width: 100px;
height: 30px;
border: 1px solid #1d9cd6;
position: relative;
border-radius: 6px;
z-index: 999;
}
.border-triangle-right:after,
.border-triangle-right:before {
content: "";
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
border-left-color: #1d9cd6;
right: -12px;
margin-left: -4px;
top: 33%;
}
.border-triangle-right:after {
border-left-color: #fff;
top: 33%;
right: -10px;
}
</style>
标签页横线带小箭头
标签页横线带小箭头
<a class="active" href="#">栏目1</a>
<style>
.active{
position: relative;
}
.active::before {
content: '';
position: absolute;
bottom: 0%;
left: 45%;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid transparent;
border-bottom: 4px solid #d10a0a;
z-index: 999;
}
</style>
单行溢出省略号
.text{
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行溢出省略号
.text{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
背景色渐变
header {
background: linear-gradient(left, #168d7d, #77f1e0);
background: -ms-linear-gradient(left, #168d7d, #77f1e0);
background: -webkit-linear-gradient(left, #168d7d, #77f1e0);
background: -moz-linear-gradient(left, #168d7d, #77f1e0);
}
