How to create arrow-shaped borders on the sides of a div

Question

How to create arrow-shaped borders on the sides of a div

Navigation

#1 by (2 votes)

0

What I have is this:

html, body {
    margin: 25px;
}

.arrow_box { 
    position: relative; 
    background: #88b7d5; 
    border: 4px solid #c2e1f5; 
    width: 200px;
}

.arrow_box:after, .arrow_box:before { 
    bottom: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0;
    position: absolute;
} 
.arrow_box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-bottom-color: #88b7d5;
    border-width: 30px;
    left: 50%; 
    margin-left: -30px; 
} 
.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-bottom-color: #c2e1f5; 
    border-width: 36px; 
    left: 50%; 
    margin-left: -36px;
}


.arrow_box > div:after, .arrow_box > div:before { 
    top: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0;
    position: absolute;
} 
.arrow_box > div:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-top-color: #88b7d5;
    border-width: 30px;
    left: 50%; 
    margin-left: -30px; 
} 
.arrow_box > div:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-top-color: #c2e1f5; 
    border-width: 36px; 
    left: 50%; 
    margin-left: -36px;
}

    <div class="arrow_box">
        <div>
            bla!<br />bla!<br />bla!<br />bla!<br />bla!<br />bla!<br />
        </div>
    </div>

I NEED THIS RESULT:

html css

asked by anonymous 14.01.2016 / 21:58

1 answer

Convention for attributes that preserve types Value Radio Button does not pass via Post php

score 2 · Accepted Answer

Just use these styles:

.arrow_box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-right-color: #88b7d5; /* border-right ao invés de border-top */
    border-width: 30px;
    left: 0; /* Left 0 as setas da esquerda */
    top: 50%; 
    margin-left: -60px; 
    margin-top: -30px;
} 
.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-left-color: #c2e1f5; /* border-left ao invés de border-top */
    border-width: 36px; 
    left: 100%; 
    top: 50%; 
    margin-top: -36px;
}

.arrow_box > div:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-left-color: #88b7d5;
    border-width: 30px;
    left: 100%; 
    top: 50%; 
    margin-top: -30px;
} 
.arrow_box > div:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-right-color: #c2e1f5; 
    border-width: 36px; 
    left: 0; 
    top: 50%; 
    margin-left: -72px;
    margin-top: -36px;
}

Complete code below:

html, body {
    margin: 25px;
}

.arrow_box { 
    position: relative; 
    background: #88b7d5; 
    border: 4px solid #c2e1f5; 
    width: 200px;
}

.arrow_box:after, .arrow_box:before { 
    bottom: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0;
    position: absolute;
} 
.arrow_box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-right-color: #88b7d5;
    border-width: 30px;
    left: 0; 
    top: 50%; 
    margin-left: -60px; 
    margin-top: -30px;
} 
.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-left-color: #c2e1f5; 
    border-width: 36px; 
    left: 100%; 
    top: 50%; 
    margin-top: -36px;
}


.arrow_box > div:after, .arrow_box > div:before { 
    top: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0;
    position: absolute;
} 
.arrow_box > div:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-left-color: #88b7d5;
    border-width: 30px;
    left: 100%; 
    top: 50%; 
    margin-top: -30px;
} 
.arrow_box > div:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-right-color: #c2e1f5; 
    border-width: 36px; 
    left: 0; 
    top: 50%; 
    margin-left: -72px;
    margin-top: -36px;
}

 <div class="arrow_box">
        <div>
            bla!<br />bla!<br />bla!<br />bla!<br />bla!<br />bla!<br />
        </div>
    </div>