CODEWITHSUNDEEP
htmlcss
Ruddy
Ruddy

Reputation: 9923

Moving CSS content onto a border

Right, I ran into a bit of a problem and not to sure if this can be solved another way.

I need to move the content: "F"; and center it onto the border I have in the top left corner. Now is this possible without creating another element?

HTML:

<div class="userBoxF"></div>

CSS:

.userBoxF {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.userBoxF:after {
    content: "F";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 40px solid #F385FF;
    border-right-color: transparent;
    border-bottom-color: transparent;
    font-size: 30px;
}

The only way I can think to do it is to create the corner as a completely separate element so I can put the text "F" into a span (or something) and move it that way.

Demo Here

Note: Nothing here will change size, width and height for both the box and corner will always be the same.

Here is what I want, using the solution i found but would rather not use.

HTML:

<div class="userBoxF">
    <div class="corner"><span>F</span></div>
</div>

CSS:

.userBoxF {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.userBoxF .corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 40px solid #F385FF;
    border-right-color: transparent;
    border-bottom-color: transparent;
    font-size: 30px;
}

.userBoxF .corner span {
    display: block;
    position: absolute;
    top: -30px;
    left: -20px;
}

Here is a demo of the solution I came up with but I would rather not create anymore elements.

My Solution

Upvotes: 2

Views: 212

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105903

From a single pseudo, you can use a gradient as background : DEMO

.userBoxF {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.userBoxF:after {
    content:"F";
    position: absolute;
    top: 0;
    left: 0;
    text-indent:20px;
    line-height:60px;
    width:80px;
    height:80px;
    background:linear-gradient(to bottom right, #F385FF 51%, transparent 49%);
    font-size: 30px;
}

background-image as gradient can be just an image like in old days :

demo image DEMO:

Upvotes: 1

SW4
SW4

Reputation: 71160

Simply use another :psuedo:

Demo Fiddle

.userBoxF {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.userBoxF:before,.userBoxF:after{
    position: absolute;
    top: 0;
    left: 0;   
}
.userBoxF:before {
    content:"";
    border: 40px solid #F385FF;
    border-right-color: transparent;
    border-bottom-color: transparent;
}
.userBoxF:after {
    content:attr(data-l);
    top: 10px;
    left: 10px;
    font-size: 30px;
}

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115066

Arguably the "F" is actual content as it's not a styling option...it actually denotes something and, perhaps should be read by a screenreader (for instance) then a span with a gradient (TL - BR) mightbe more appropriate.

JSFiddle Demo

HTML

<div class="userBoxF">
    <span class="section-letter">F</span>
</div>

CSS

.userBoxF {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.section-letter {
    position: absolute;
    top: 0;
    left: 0;
    width:2em;
    height:2em;
    line-height: 1em;
    text-align: left;
    padding:0.25em 0 0 0.25em;
    font-size: 30px;
    background: linear-gradient(135deg, pink 0%, pink 50%, transparent 50%, transparent 100%);

}

Upvotes: 1

casraf
casraf

Reputation: 21694

You can use :before wit :after together.

I removed the span:

<div class="userBoxF">
</div>

And changed the CSS blocks to this:

.userBoxF:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 40px solid #F385FF;
    border-right-color: transparent;
    border-bottom-color: transparent;
    content: "";
}

.userBoxF:after {
    display: block;
    position: absolute;
    top: 10px;
    left: 14px;
    content: "F";
    font-size: 30px;
}

And here's the updated fiddle

EDIT: Here's an added bonus!

You can jack the "F" from the class, if you want it to be more versatile, if you use CSS's attr inside content. Example:

<div class="userBox" data-l="F">
</div>

And:

.userBox:after {
    display: block;
    position: absolute;
    top: 10px;
    left: 14px;
    content: "" attr(data-l);
    font-size: 30px;
}

And another fiddle

Upvotes: 2

Related Questions