常见的css的效果--箭头--三角形--条纹
css 效果
<body>
<div class="tw"></div>
<div class="div"></div>
<div id="test2"></div>
<div id="test1"></div>
<div class="tops"></div>
<div class="right"></div>
</body>
<style>
/*间隔条纹效果，列表实现颜色交叉的效果*/
.tw{
width:300px;
height:200px;
margin-bottom:100px;
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 50px;
}
.right{
/*通过旋转得到90度的箭头*/
width: 7px;
height: 7px;
border-top: 2px solid #ccc;
border-right: 2px solid #ccc;
transform: rotate(45deg);
}
.div{
background:red;
border-radius:20px;
padding: 1em;
box-shadow: 0px 0px 0px 8px #655;
outline: 8px solid #655;
}
#test1 {
height:0px;
width:0px;
border-right: 50px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid red;
/* transform:rotate(-45deg); */
/* border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:solid;
border-width:20px; */
}
#test2{
height:0;
width:0;
border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:solid;
border-width:20px;
}
.tops{
width:0;
height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid red;
/* transform: rotate(45deg); */
}
.t-omit {
/*
单行文本显示、超出省略
注意:在flex部分布局下使用可能会冲突
*/
display: block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.t-omit-two {
/*
两行文本超出省略显示
注意:在flex部分布局下使用可能会冲突
*/
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
white-space: normal !important;
}
</style>
