Create a Specific Div Shape in CSS

Question

I would like to create this specific div shape: Rectangular div with a little transparent triangle at the top-center of it

I have read on how to create custom shapes but I really don't get the logic.. Can someone here kindly help me on the drawing of such a shape or redirect me to a web that explain really well the logic behind it? thanks,

score 0 · Answer 1 · answered Feb 01 '17 at 06:38

The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. there is a great and simple tutorial at css-tricks website with little animation that shows exactly how it all happens.

score 0 · Answer 2 · answered Feb 01 '17 at 06:48

you can design it like:

.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>

score 0 · Answer 3 · answered Feb 01 '17 at 07:01

You can achieve this by:

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;
}

Create a Specific Div Shape in CSS

3 Answers3