CODEWITHSUNDEEP
htmlcss
Juan Carlos Oropeza
Juan Carlos Oropeza

Reputation: 48177

How simplify this css

I'm new in CSS.
I create 4 class to change the style of each corner. And is working as you can see in running codding snippet, but i repeat lot of code.

This is the only different line

border-width: 0 16px 16px 0;

I would like to modify the css so I could create something like

<div id="infoPopup" class="note topRight">

I was trying something like 

.note {}
.note:before {}
.note:before .topLeft {border-width: 0 16px 16px 0;}
.note:before .topRight {border-width: 0 0 16px 16px;}
.note:before .bottomLeft {border-width: 16px 16px 0 0;}
.note:before .bottomRight {border-width: 16px 0 0 16px;}

What I already have working 

    .noteTopRight {
        position: relative;
        width: 30%;
        padding: 1em 1.5em;
        margin: 2em auto;
        color: #fff;
        background: #97C02F;
    }

        .noteTopRight:before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            border-width: 0 16px 16px 0;
            border-style: solid;
            border-color: #658E15 #fff;
        }

    .noteTopLeft {
        position: relative;
        width: 30%;
        padding: 1em 1.5em;
        margin: 2em auto;
        color: #fff;
        background: #97C02F;
    }

        .noteTopLeft:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            border-width: 0 0 16px 16px;
            border-style: solid;
            border-color: #658E15 #fff;
        }

    .noteBottomRight {
        position: relative;
        width: 30%;
        padding: 1em 1.5em;
        margin: 2em auto;
        color: #fff;
        background: #97C02F;
    }

        .noteBottomRight:before {
            content: "";
            position: absolute;
            bottom: 0;
            right: 0;
            border-width: 16px 16px 0 0;
            border-style: solid;
            border-color: #658E15 #fff;
        }

    .noteBottomLeft {
        position: relative;
        width: 30%;
        padding: 1em 1.5em;
        margin: 2em auto;
        color: #fff;
        background: #97C02F;
    }

        .noteBottomLeft:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            border-width: 16px 0 0 16px;
            border-style: solid;
            border-color: #658E15 #fff;
        }
<div class="noteTopRight"><div>Hola<br> World</div></div>
<div class="noteTopLeft"><div>Hola<br> World</div></div>
<div class="noteBottomRight"><div>Hola<br> World</div></div>
<div class="noteBottomLeft"><div>Hola<br> World</div></div>

Upvotes: 2

Views: 132

Answers (3)

Leo
Leo

Reputation: 580

You are doing it almost right.

Do like this:

.note { /*common style*/}
.note:before { /*common style*/ }
.note-topLeft:before {border-width: 0 16px 16px 0;}
.note-topRight:before {border-width: 0 0 16px 16px;}
.note-bottomLeft:before {border-width: 16px 16px 0 0;}
.note-bottomRight:before {border-width: 16px 0 0 16px;}

And then:

<div id="infoPopup" class="note note-topLeft"><div id="thing">Hola<br> World</div></div>
<div id="infoPopup1" class="note note-topRight"><div>Hola<br> World</div></div>
<div id="infoPopup2" class="note note-bottomLeft"><div>Hola<br> World</div></div>
<div id="infoPopup3" class="note note-bottomRight"><div>Hola<br> World</div></div>

1, 2, 3 Do not use the same id twice.

Upvotes: 2

blurfus
blurfus

Reputation: 14031

Per my comment above, I would simplify it like this:

 .note{
    position: relative;
    width: 30%;
    padding: 1em 1.5em;
    margin: 2em auto;
    color: #fff;
    background: #97C02F;
}

.note:before{
    content: "";
    position: absolute;
    border-style: solid;
    border-color: #658E15 #fff;
}


.noteTopLeft:before {
    border-width: 0 0 16px 16px;
    top: 0;
    left: 0;

}

.noteTopRight:before {
    border-width: 0 16px 16px 0;
    top: 0;
    right: 0;
}

.noteBottomRight:before {
    border-width: 16px 16px 0 0;
    bottom: 0;
    right: 0;
}

.noteBottomLeft:before {
    border-width: 16px 0 0 16px;
    bottom: 0;
    left: 0;
}
<div id="infoPopup0" class="note noteTopRight"><div id="thing">Hola<br> World</div></div>
<div id="infoPopup1" class="note noteTopLeft"><div>Hola<br> World</div></div>
<div id="infoPopup2" class="note noteBottomRight"><div>Hola<br> World</div></div>
<div id="infoPopup3" class="note noteBottomLeft"><div>Hola<br> World</div></div>

Upvotes: 1

indubitablee
indubitablee

Reputation: 8206

the positions are different in each one (not just the border-width)

.note {
    position: relative;
    width: 30%;
    padding: 1em 1.5em;
    margin: 2em auto;
    color: #fff;
    background: #97C02F;
}

.note:before {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: #658E15 #fff;
}

.noteTopRight:before {
    top: 0;
    right: 0;
    border-width: 0 16px 16px 0;
}

.noteTopLeft:before {
    top: 0;
    left: 0;
    border-width: 0 0 16px 16px;
}

.noteBottomRight:before {
    bottom: 0;
    right: 0;
    border-width: 16px 16px 0 0;
}

.noteBottomLeft:before {
    bottom: 0;
    left: 0;
    border-width: 16px 0 0 16px;
}
<div class="note noteTopRight"><div id="thing">Hola<br/> World</div></div>
<div class="note noteTopLeft"><div>Hola<br/> World</div></div>
<div class="note noteBottomRight"><div>Hola<br/> World</div></div>
<div class="note noteBottomLeft"><div>Hola<br/> World</div></div>

Upvotes: 3

Related Questions