用底部三角形做div [英] Make div with bottom triangle

问题描述

我一直在尝试使用div来制作白色形状

http://sircat.net/joomla/sircat/mies/2.png

我如何获得div底部的对角线形状？

我有这个div：
width：620px;
height：440px;
background-color：white;

谢谢

编辑：忘记背后的bg div，我想用对角边框制作div，而不是在bg的帮助下，因为它位于顶层

解决方案

您也可以在伪选择符之后使用边框和： http：// jsfiddle。 net / qQySU /



  #pointed {
 position：relative; 
 margin：0 auto; 
 width：200px; 
 height：200px; 
背景颜色：白色; 
} 
 
 #pointed：after，
 #pointed :: after {
 position：absolute; 
 top：100％; 
剩下：50％; 
保证金余额：-50％; 
内容：''; 
 width：0; 
 height：0; 
 border-top：固体150像素红色; 
 border-left：实体100像素透明; 
 border-right：纯色100像素透明; 
} 
  

为了便于识别边界，在最后3行的边框宽度上播放，以获得所需的提示。

编辑。：
$ b

可兼容性参考： http://caniuse.com/css-gencontent

编辑2：

作为交换语义，你可以更多地浏览它，在内部元素上而不是之后：伪选择器。

I have been trying to do the white shape with a div:

http://sircat.net/joomla/sircat/mies/2.png

how do I get the diagonal shapes of the bottom of the div?

I have this for the div: width: 620px; height: 440px; background-color: white;

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

解决方案

You can also use borders and the :after pseudo selector: 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.

Edit.:

Reference for compability: http://caniuse.com/css-gencontent

Edit 2:

In exchange for semantics, you can get it more crossbrowser you can place the stle on a inner element instead of on the :after pseudo selector.

这篇关于用底部三角形做div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！