Html 用底部三角形制作div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12251149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make div with bottom triangle
提问by codek
I have been trying to do the white shapewith a div:
我一直在尝试用 div做白色形状：
http://sircat.net/joomla/sircat/mies/2.png
http://sircat.net/joomla/sircat/mies/2.png
how do I get the diagonal shapes of the bottom of the div?
如何获得div底部的对角线形状？
I have this for the div: width: 620px; height: 440px; background-color: white;
我有这个用于 div: width: 620px; 高度：440px；背景颜色：白色；
thank you
谢谢你
Edit: just forget the bg behind the div, I want to make the div with the diagonal borders, not with the help of the bg because it is in the top layer
编辑：忘记 div 后面的 bg，我想用对角线边框制作 div，而不是在 bg 的帮助下，因为它在顶层
回答by Ricardo Souza
You can also use borders and the :afterpseudo selector: http://jsfiddle.net/qQySU/
您还可以使用边框和: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;
}
I've colored the tip for easy identification of the borders. Play around the border widths on the last 3 lines to get the tip you want.
我已经对尖端进行了着色，以便于识别边界。围绕最后 3 行的边框宽度进行调整以获得您想要的提示。
Edit.:
编辑。：
Reference for compability: http://caniuse.com/css-gencontent
兼容性参考：http: //caniuse.com/css-gencontent
Edit 2:
编辑2：
In exchange for semantics, you can get it more crossbrowser you can place the stle on a inner element instead of on the :afterpseudo selector.
作为语义的交换，您可以获得更多的跨浏览器，您可以将 stle 放在内部元素而不是:after伪选择器上。
回答by Ana
Simplest (least amount of code)method: just use a CSS linear-gradienthttp://dabblet.com/gist/3610406
最简单（最少代码）方法：只需使用 CSS http://dabblet.com/gist/3610406linear-gradient
HTML:
HTML：
<div class='box'>Text goes here...</div>
CSS:
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;
}
Better compatibility & better looking: you could use a pseudo-elementwith a box-shadow: http://dabblet.com/gist/3610548
更好的兼容性和更好看的：你可以使用一个伪元素有box-shadow：http://dabblet.com/gist/3610548
HTML:
HTML：
<div class='box'>text goes here... hover me ;)</div>
CSS:
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;
}
