CODEWITHSUNDEEP
htmlcss
balintpekker
balintpekker

Reputation: 1844

Border with margin-top

I would like to make a div that has a margin-top: -110px, but I want to add a border-right on it starting from the top of the div, but without the margin-top: -110px attribute.

enter image description here

I know I could use two or more div, but it needs to be done with only 1. Can it be done with CSS or I need to use JavaScript?

Upvotes: 1

Views: 8199

Answers (1)

MightyPork
MightyPork

Reputation: 18861

You can achieve this using the CSS pseudo-elements:

div {
    width: 100px;
    height: 200px;

    border-top: 100px solid red;

    position:relative;    
    background-color: gray;
}

div:after {
    display: block;
    position:absolute;

    content:" ";

    width: 0;
    height: 100%;

    border-right: 3px solid lime;
    top: 0;
    right:-3px;
}

http://jsfiddle.net/6W2KP/5/

enter image description here

Upvotes: 2

Related Questions