CSS伪元素after、before使用示例(三)

  用户:after元素实现小旗的燕尾效果。如下图所示:




  代码很简单,就是把:after元素旋转一下:
    <style type="text/css">
    	.section__title{
    		width:10em;
    		padding-left:1em;
    		height:1.6em;
    		line-height:1.6em;
    		vertical-align:middle;
    		background-color:red;
    		position:relative;
    	}
    	
    	.section__title:after{
    		content:"";
    		position:absolute;
    		display:block;
    		width:1.6em;
    		height:1.6em;
    		right:-0.5em;
    		top:0.1em;
    		background-color:white;
			-ms-transform:rotate(45deg); 	/* IE 9 */
			-moz-transform:rotate(45deg); 	/* Firefox */
			-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
			-o-transform:rotate(45deg); 	/* Opera */
    		tranform:rotate(45deg);
    	}
    	.section__bd{
    		text-indent:2em;
    		margin-bottom:1em;
    		margin-top:0.5em;
    	}
    </style>


	<div class="section__title">一、活动说明</div>
	<div class="section__bd">
	层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML
	</div>
  
	<div class="section__title">二、行程安排</div>
	<div class="section__bd">
	层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML
	</div>

猜你喜欢

转载自wallimn.iteye.com/blog/2365853