我一直在尝试用 div做白色形状:
http://sircat.net/joomla/sircat/mies/2.png
如何获得 div 底部的对角线形状?
我有这个 div: width: 620px; 高度:440px;背景颜色:白色;
谢谢你
编辑:忘记div后面的bg,我想用对角线边框制作div,而不是在bg的帮助下,因为它在顶层
我一直在尝试用 div做白色形状:
http://sircat.net/joomla/sircat/mies/2.png
如何获得 div 底部的对角线形状?
我有这个 div: width: 620px; 高度:440px;背景颜色:白色;
谢谢你
编辑:忘记div后面的bg,我想用对角线边框制作div,而不是在bg的帮助下,因为它在顶层
您还可以使用边框和:after
伪选择器:http: //jsfiddle.net/qQySU/
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}
#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}
我已经为笔尖上色以便于识别边界。围绕最后 3 行的边框宽度进行播放以获得所需的提示。
编辑。:
兼容性参考:http ://caniuse.com/css-gencontent
编辑2:
为了换取语义,您可以获得更多跨浏览器,您可以将 stle 放在内部元素上,而不是放在:after
伪选择器上。
最简单(代码量最少)的方法:只需使用 CSS http://dabblet.com/gist/3610406linear-gradient
HTML:
<div class='box'>Text goes here...</div>
CSS:
.box {
width: 26em;
min-height: 31em;
padding: 1em;
outline: solid 1px lightblue;
margin: 0 auto;
background: linear-gradient(45deg, dimgrey 47%, black 50%, transparent 50%)
no-repeat 0 100%,
linear-gradient(-45deg, dimgrey 47%, black 50%, transparent 50%)
no-repeat 100% 100%;;
background-size: 50% 14em;
}
更好的兼容性和更好的外观:您可以使用带有以下内容的伪元素box-shadow
: http: //dabblet.com/gist/3610548
HTML:
<div class='box'>text goes here... hover me ;)</div>
CSS:
html { background: darkgrey; }
.box {
box-sizing: border-box;
position: relative;
width: 20em;
height: 20em;
padding: 1em;
margin: 3em auto 0;
background: white;
}
.box:before {
position: absolute;
right: 14.65%; /* 50% - 35.35% */ bottom: -35.35%; /* half of 70.71% */
width: 70.71%; /* 100%*sqrt(2)/2 */
height: 70.71%;
box-shadow: 2px 2px 1px dimgrey;
transform: rotate(45deg);
background: white;
content: '';
}
.box:hover, .box:hover:before {
background: plum;
}