Question

我想创建这个特定的div形状： Rectangular div with a little transparent triangle at the top-center of it

我已经阅读了如何创建自定义形状，但我真的没有得到逻辑..有人可以帮助我绘制这样的形状或将我重定向到一个网络，很好地解释它背后的逻辑？谢谢，

Answer 1

这个想法是一个零宽度和高度的盒子。箭头的实际宽度和高度由边框的宽度决定。在css-tricks网站上有一个非常简单的教程，只有很少的动画，可以准确显示它是如何发生的。

Answer 2

你可以设计它：

.rect {
            background: black;
            height: 50px;
            width: 150px;
            position: relative;
            overflow: hidden;
        }
        .rect:after {
            content: "";
            background: #ffffff;
            height: 50px;
            width: 50px;
            -moz-transform: rotate(45deg); 
            -ms-transform: rotate(45deg); 
            -webkit-transform: rotate(180deg); 
            -o-transform: rotate(180deg);
            transform: rotate(45deg);
            display: block;
            position: absolute;
            top:-35px;
            right: 50px;
            
        }

<div class="rect"></div>

Answer 3

您可以通过以下方式实现这一目标：

HTML：

<div class="block"> <div class="arrow-down"></div> </div>

CSS：

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #fff;
    position:absolute;
    top:0;
    left:50%;
}

.block{
   background-color:black;
   height: 200px;
   position:relative;
}

在CSS中创建特定的Div形状

3 个答案: