常见的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>

　　

posted @ 2021-01-29 17:46  小小强学习网  阅读(166)  评论(0)    收藏  举报