CODEWITHSUNDEEP
css
0x49D1
0x49D1

Reputation: 8704

Need to create container with triangle in css

Design element
I have such design element. How to create it on page? My first guess was to create triangle image and add it to right side of my element like this:

.profile-menu :hover
{
    background-color: #50BBFF;
    background-image: url("/Images/menu-triangle.png") ;
    background-position: right center; 
    background-repeat: no-repeat; 
    background-position: 145px 15px;
}

But the problem here is that triangle hides after it passes element's border. z-index doesnt help here. I know that there sure are several ways to achieve that, but cant find the one.

Upvotes: 0

Views: 1336

Answers (2)

SpaceBeers
SpaceBeers

Reputation: 13947

You actually could do this with just background images using CSS3's multiple background images.

I put an example together yesterday which you can see here. If you know the dimensions of your box you could use this method.

http://jsfiddle.net/spacebeers/T8Yzj/39/

.box3 {
    z-index: 100;
    border: none;
    padding: 10px 0 30px 0;    
    background-image: url("http://test.mark-design.co.uk/4ik4e7ic.png"), url('http://test.mark-design.co.uk/line.png');
    background-position: 50% -1px, left top;
    background-repeat: no-repeat, repeat-x;
}

EDIT:

You can also do exactly what you want without ANY images - http://jsfiddle.net/spacebeers/T8Yzj/55/

.box2 {
    width: 100px;
    height: 50px;
    background: red;
    color: white;
    position:relative
}

.box2:after {
    content: "";
    position:absolute;
    width: 0;
    height: 0;
    bottom: 25%;
    left:100px;
    border-left: 10px solid #000;
    border-right: 10px solid transparent;   
    border-bottom: 10px solid transparent;    
    border-top: 10px solid transparent;
}

Upvotes: 2

ippi
ippi

Reputation: 10167

First, you could have a look at http://cssarrowplease.com/ You can never make a background image go beyond the div that contains it, so why not just make the entire button one image, with the blue box and the triangle included?

Or if you absolutely want two objects, you could wrap them in.

<div>
    <div class="blue-box"></div>
    <div class="triangle"></div>
</div>

Upvotes: 2

Related Questions