CODEWITHSUNDEEP
htmlcssangle
Gandoe Dyck
Gandoe Dyck

Reputation: 97

making border have a angle

I am traying to make an angled border, I made a quick paint-ish design on what I mean or try to say :enter image description here

The green is a logo,centered in the middle. The paurple are DIV's, the white is white space.

I want the purple DIVs to have those angled edges! I have NO idea how to do this.

I searched for some angled css border but I only found shapes, but I dont understand how it works after reading :/

Anyone that can give me a hand or point me in the right direction? Thanks a Bunch!

Upvotes: 0

Views: 278

Answers (1)

bowheart
bowheart

Reputation: 4676

I wouldn't try to smash the purple divs into those shapes. I would recommend an HTML setup like this:

<span class="triangle-1"></span>
<div>
    <span class="triangle-2"></span>
    <span class="logo"></span>
    <span class="triangle-3"></span>
</div>
<span class="triangle-4"></span>

And make CSS shapes with the white triangles--a much easier task in CSS. Here's CSS for a perfectly responsive example, which may or may not be what you want:

body {
    background: #652f70;
    font-size: 0;
    margin: 0;
    text-align: center;
}
span {
    display: inline-block;
}
.triangle-1 {
    border-top: 40vh solid #fff;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
}
.triangle-2 {
    border-left: 33vw solid #fff;
    border-top: 10vh solid transparent;
    border-bottom: 10vh solid transparent;
    position: absolute;
    left: 0;
}
.logo {
    background: #78bd52;
    height: 20vh;
    width: 34vw;
}
.triangle-3 {
    border-right: 33vw solid #fff;
    border-top: 10vh solid transparent;
    border-bottom: 10vh solid transparent;
    position: absolute;
    right: 0;
}
.triangle-4 {
    border-bottom: 40vh solid #fff;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
}

And here's a JSFiddle

Upvotes: 1

Related Questions