CODEWITHSUNDEEP
csshtml
sergdenisov
sergdenisov

Reputation: 8572

How can I do thing like arrow in design of div?

How can I do thing like arrow in design of div? div

Upvotes: 1

Views: 357

Answers (3)

Adrift
Adrift

Reputation: 59799

<aside></aside>

aside {
   background: lightgray;
   height: 5em;
   position: relative;
   width: 10em;
}

aside::after {
   background: lightgray; 
   border-bottom: .8em solid lightgray;
   border-left: .4em solid transparent; 
   border-right: .4em solid transparent;
   content: "";
   left: 10%;
   position: absolute;
   top: -.6em;
}

http://jsfiddle.net/7UUqa/4/

Upvotes: 2

stuajc
stuajc

Reputation: 261

Creating a triangle as a pseudoelement using borders is one way to do it, but your mockup includes a box-shadow. If you don't want to sacrifice the box-shadow (because using the border technique, it will create a square shadow and look quite bad), there is a way.

Create two pseudoelements styled as absolutely positioned squares, and rotate them 45 degrees. Set just one of them to a lower stacking order than the default (z-index: -1) and apply the box shadow to that element.

Check out the jsFiddle

HTML:
<div class="container"></div>

CSS:

.container:before,
.container:after {
    content: '';
    width: 2em; height: 2em;
    position: absolute; top: -1em; left: 50%;
    margin-left: -.5em;
    background: green;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

.container:before {
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow: 0 0 5px black;
    box-shadow: 0 0 5px black;
    z-index: -1;
}

Upvotes: 2

Josh Crozier
Josh Crozier

Reputation: 240978

If you want to make a triangle, do something like this.. I will leave the positioning to you.

HTML

<div class="triangle"></div>

CSS

.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 9px 15px 9px;
border-color: transparent transparent #007bff transparent;
}

For example purposes, the triangle is blue.. you are obviously going to want to make it white/transparent for what you are trying to achieve.

jsFiddle here

For positioning, I would suggest using the :after / :before pseudo selector.

Upvotes: 2

Related Questions