CODEWITHSUNDEEP
htmlcss
Eric Christensen
Eric Christensen

Reputation: 29

CSS3 change div style

i have searched over an hour right now after this. Im trying to find how to style a div's apperance.

http://i.gyazo.com/b3e39c4d80c74e559e832c4d22bb87c2.png

The picture show a black div with a "arrow" side on the left. How do you make those things?

Upvotes: 0

Views: 46

Answers (3)

cpk
cpk

Reputation: 809

Because the triangle is angled, it may be worth looking into SVG as the content of a :before pseudo element.

Here is a codepen that I almost completed for you using only CSS. http://codepen.io/anon/pen/dPVERJ

You may have to tweak it a bit to get it looking exactly like the image. I used cssarrowplease to generate the basic arrow and tweaked it from there.

Also see http://css-tricks.com/snippets/css/css-triangle/

I would google something like this before asking here, this is a problem that has been figured out many times over.

Upvotes: 0

kasper Taeymans
kasper Taeymans

Reputation: 7026

here is a quick way to accomplish this.

jsfiddle demo

css 

#frame{
    width:90%;
    border: 20px solid lightblue;
    background:black;
}
.title{
    font-size:3em;
    position:absolute;
    color:white;
    top: 60px;
    margin-left:80px;
}
.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;

    border-left: 60px solid lightblue;
}

html

<div id="frame">
<div class="arrow-right"></div>
<div class="title">Some text here!</div>
</div>

Upvotes: 1

Joseph Marikle
Joseph Marikle

Reputation: 78520

I would use an inverted arrow (border hacks using top and bottom border) to achieve this. You can also make it part of a pseudo-element so that your markup remains clean.

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200);
body {
    background: #BCDEB1;
}
h1 {
    font-family: 'Yanone Kaffeesatz';
    float:right;
    background: black;
    position: relative;
    color: white;
    padding: 0.5em 0.5em;
    line-height: 1em;

    margin-right: 0.1em;
    box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2);
}

h1:after {
    content: '';
    position: absolute;
    right: 100%;
    top: 0;
    border: 0 solid black;
    border-left: 0.5em solid transparent;
    border-top-width: 1em;
    border-bottom-width: 1em; /* 1 + 1 = 2.  The parent is 1em line height + 0.5em top padding + 0.5em bottom padding */
    
    box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2);
}
<h1>Administration and etc?</h1>

Upvotes: 0

Related Questions