1.伪元素实现换行
.inline-element :: after {
content: "\A";
white-space: pre;
}
2.三角
利用伪元素 after 加一个 look 文字的border,利用定位定位到 look 底下,差不多是图中的样式,border为20px的红边框然后,白线分割的border分别是上右下左,要出现对话框的效果,令border只剩下右边的三角,所以设置border颜色为transparent,但是border-right颜色和对话框一致即可
最后的效果是这样的
代码如下
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>blog2</title> ???<style> ???????.look { ???????????width: 200px; ???????????height: 80px; ???????????text-align: center; ???????????line-height: 80px; ???????????background: pink; ???????????position: relative; ???????????border-radius: 4px; ???????} ???????.look:after { ???????????content: ‘‘; ???????????border:20px solid transparent; ???????????position: absolute; ???????????bottom: -20px; ???????????border-right-color: pink; ???????} ???????????</style></head><body> ???<div class="look">look</div></body></html>注意最后是设置border-right-color,而不是border-right!!!
3.水平居中,垂直居中可以用定位做:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>blog2</title> ???<style> ???????.look { ???????????width: 200px; ???????????height: 80px; ???????????text-align: center; ???????????line-height: 80px; ???????????background: pink; ???????????position: relative; ???????????border-radius: 4px; ???????} ???????.look:after { ???????????content: ‘‘; ???????????border:20px solid #fff; ???????????position: absolute; ???????????border-top-color: red; ???????????border-right-color: orange; ???????????border-bottom-color: yellow; ???????????border-left-color: lightgreen; ???????????left: 50%; ???????????top:50%; ???????????transform: translate(-50%,-50%); ???????} ???????????</style></head><body> ???<div class="look">look</div></body></html>css 比较常见的换行,三角,居中等做法
原文地址：http://www.cnblogs.com/laofugui/p/8012378.html