Last Updated
Viewed 10 Times
        

I am trying to create a menu with a custom shape, but without much success. Can someone help me with figuring out the way to create this shape? I have already tried to make it with ::before tag but I was losing the shape as soon as the div would get resized.

enter image description here

How can I use CSS to create a dynamic corner frame as shown in this picture below?enter image description here

Below is my current solution, but it is not dynamic enough as I have two contents with two different width,

    <p class="description-header">
        <span class="frame-header frame-header-top"></span>
        <span class="description-text"><?php echo $home->excerpt;?></span>
        <span class="frame-header frame-header-bottom"></span>
    </p>

css,

.description-header {
    position:absolute;
    bottom:0;
    right:0;
    width:182px;
    font-size:12px;
    line-height:14px;
    margin:0;
    padding:0;
    border:0 solid red;
}

.frame-header {
    display:block;
    width:182px;
    height:10px;
    float:none;
    background-image:url(../images/frame-header.jpg);
    background-repeat: no-repeat;
    margin:0;
    border:0 solid red;
}

.frame-header-top {
    background-position: top left;
}

.frame-header-bottom {
    background-position: bottom left;
}

.description-text {
    width:160px;
    display:block;
    float:none;
    margin: 0 auto;
    border:0 solid red;
}

Any better ideas?

If an element exists on a page with more than one border color, the corner where these colors meet create a bevel by default. This seems like an odd choice for the border-corner style. I would instead prefer that one of the borders "overpowers" the other border such that a straight line is shown instead.

To illustrate this effect, consider the following:

Top: default; bottom: desired

See example jsFiddle example I created here.

The top two items display the default, beveled behavior. The bottom two display the desired, expected behavior, where in this case, border-top "overpowers" or "overrides" the corner of border-left and border-right.

The markup for the top case:

<div class="container">
    <div class="border">Item one</div>
    <div class="border">Item two</div>
</div>

And the CSS:

.container {
    margin: 5px;
    width: 150px;
    background: yellow;
}
.border {
    padding: 5px;
    border: 15px solid red;
    border-top: 15px solid teal;
}

The markup for the bottom case:

<div class="container">
    <div class="border-top"></div>
    <div class="border-reg">Item one</div>
    <div class="border-top"></div>
    <div class="border-reg">Item two</div>
</div>

And the CSS:

.border-top {
    border-top: 15px solid teal;
}
.border-reg {
    border: 15px solid red;
    border-top: 0;
    padding: 5px;
}

Although the second method I devised does produce the effect I want, it seems as if this is unnecessarily tedious for something that I would have assumed to have the default state. If I were to want the border-left to override the other borders, for example, I would have to deal with some float: left and inline element madness.

The Question (Finally)

Is there any easier method of removing the default bevel-behavior observed on all browsers?

Although the case detailed above is mostly easy for having the border-top or border-bottom overriding the corners, it is not as easy of a task, for example, if I need the border-left and border-right to override the border-top and border-bottom.

This question already has an answer here:

How can I create the "blue" and "orange" corners in CSS, like in this image:

Thanks

Similar Question 4 (3 solutions) : How to create angled double border effect CSS

Similar Question 5 (1 solutions) : How to create multiple columns in a div

Similar Question 6 (2 solutions) : Semi-circle on the bottom side of a div?

Similar Question 8 (3 solutions) : How to achieve this effect on :focus

cc