您的位置：首页 > Web前端 > CSS

div css 伪类不固定图片大小居中， css div 实现三角形

2017-09-22 14:52 751 查看

div css 伪类不固定图片大小居中

<style>
.pic_box{width:300px; height:300px; background-color:#beceeb; font-size:0; *font-size:200px; text-align:center;}
.pic_box img{vertical-align:middle;}
.pic_box::after{
content:'center';
display:inline-block;
width:0;
height:100%;
vertical-align:middle;
overflow:hidden;
}

</style>

<div class="pic_box">
　　<img src="http://i.santelvxing.com/upload/2016/ouc8qxay7-uystiw75ku-125148768.jpg" />
</div>

css div 实现三角形

<style>
.left{
float: left;
}
.mlr-20{
margin-left:20px;
margin-right:20px;
}
.triangle{
width: 0;
height: 0;
border: 20px solid #fff;
}
.triangle-down{
border-color: #209E6B  transparent transparent transparent;
}
.triangle-right{
border-color: transparent transparent transparent #209E6B;
}
.triangle-special{
border-color: #209E6B #209E6B transparent #209E6B;
}
</style>

<body>
<div class="triangle triangle-down  left mlr-20">

</div>
<div class="triangle  triangle-right left mlr-20">

</div>
<div class="triangle triangle-special left mlr-20">

</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

div css 伪类 不固定图片大小 居中， css div 实现三角形

div css 伪类不固定图片大小居中， css div 实现三角形