Home/ Questions/Q 9089715
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T22:12:35+00:00

Im trying to create a container with css that has a rectangle header with

  • 0

Im trying to create a container with css that has a rectangle header with a ‘triangle edge’.

Example:

chrome example

Or code here (css):

.bubble {
    clear: both;
    margin: 0px auto;
    width: 350px;
    background: #fff;
    -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);  
    position: relative; 
    z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

div#container {
    margin: 50px auto 0px auto; /* centered */
    padding-top:100px;
    width: 400px;
}

.triangle {
   height: 35px;
   top: -20px;
   width: 315px;
   position: relative;
   background: #D12738;
   background: -moz-linear-gradient(top, rgba(209, 39, 56, 1) 0%, rgba(122, 23, 38, 1)    100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209, 39, 56, 1)), color-stop(100%,rgba(122, 23, 38, 1)));
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d12738',  endColorstr='#7a1726',GradientType=0 ), filter:  progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

.triangle::after {
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(35deg);
   -o-transform: rotate(45deg);
   background: none repeat scroll 0 0 white;
   content: "";
   height: 44px;
   left: 302px;
   position: absolute;
   top: 2px;
   width: 24px;
}

html:

<div id="container">
    <div class="bubble">
        <div class="triangle">test baa</div>
        <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p>
        <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p>
        <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p>
        <p>sadsadsadsad dsdsa dsdsa ds dsadsd</p>

    </div>
</div>

But the border on the right edge dissapears because of the white background. Is there any way to prevent this?

Any help appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can’t accomplish what you’re trying to do by creating a triangle with that method, because by definition you’re blocking out a piece of the rectangle with something that’s also going to block out whatever else is behind it.

    The way to accomplish what you want to accomplish is to create a triangle using a border. Here’s a link and a fiddle to how you might accomplish this:

    http://css-tricks.com/snippets/css/css-triangle/
    http://jsfiddle.net/BNVHU/7/

    Unfortunately, border gradients only work with webkit at this time, and don’t seem to jibe with the border method of making triangles. I doubt that there’s a way to do this with a gradient intact in all browsers. Might need an image.

    • 0