How do I add colored corners to a background image?


Tags: html,css,css3,layout

Problem :

Is it possible to design what is shown in image using only html and css?

If yes, how?

If No, what is the alternative?

creating transparent image with 2 colored corners and applying it as background image to div that holds text is in my mind. Is there any better way to do this?

I like to do it using html and css only because then it becomes flexible than using image.

I added the code that i tried. please check. got the desired output. but i would like to know if any improvements can be made ?

enter image description here

<style>
#rules
{
     width:200px;
     height:100px;
}
#rules .top, #rules .bottom
{
    width:200px;
    height:10px;
    float:left;
}
#rules .top::before
{
    content:"";
    display:inline-block;
    width:40px;
    height:10px;
    background-color:#000;
}
#rules .left, #rules .right
{
    width:200px;
    float:left;
    height:30px;
}

#rules .left::before
{
    content:"";
    display:inline-block;
    width:10px;
    height:30px;
    background-color:#000;
}
.center
{
    width:200px;
    height:20px;
    float:left;
    text-align:center;
}
#rules .right::after
{
    content:"";
    display:block;
    width:10px;
    height:30px;
    background-color:#000;
    float:right;
}
#rules .bottom::after
{
    content:"";
    display:inline-block;
    width:40px;
    height:10px;
    background-color:#000;
    float:right;
}
</style>
</head>

<body>
<div id="rules">
    <div class="top"></div>
    <div class="left"></div> 
    <div class="center">RULES</div> 
    <div class="right"></div>
    <div class="bottom"></div>         
</div>
</body>


Solution :

Personally, I'd achieve this effect using psuedo-elements. Use ::before and ::after for each of the corners, and use their left and top (respectively right and bottom) borders in the colour you want. You can then set their width and height. Be sure to set the "hidden" borders to zero width so that you don't get slanted corners.

If you have a problem implementing this, please feel free to come back with the code you have tried :)


    CSS Howto..

    Show div at mouse click position, accounting for scrolling

    How to blend an image with a solid colour in CSS?

    Showing/hiding content with jQuery

    How to build dynamic css main/sub menu's (or do I need jquery)?

    css how to align a graphic on page

    How to overcome Selenium CSS parent only CSS selector limitation

    Angularjs - bind value from directive to ng-show/hide anywhere in document

    How to create footers in CSS

    How to get a label under an underlined word in css? [closed]

    How To Display only First Word of H2 Heading With JavaScript or CSS

    How to add a new CSS class to a Link Badge if the value is 0?

    How can I add the css to my project asp.net mvc? [closed]

    How to make a rounded corner rectangle with a cut corner using css?

    How to trigger one element inside a div on mouse hover in CSS

    Bootstrap - how to make the image being scaled down to fit the window height?

    How to determine CSS attribute is set on the element?

    How does one know exact pixel size / relationships between CSS elements?

    transition ease-out, right to left, how?

    How can I redirect a request file to real folder with htaccess?

    Show different text based on OS

    How to blend CSS classes for different results

    how decrease font size?

    Shadow DOM: how to apply CSS style only if the host element is ?

    How do I use PHP to apply css properties? [closed]

    How can I know if I am clicking on a transparent or non-transparent part of a png on a web page?

    CSS: How to force floating blocks to have equal (100%?) height

    Dropdown not showing on small screens

    How to get selected table cells background colour?

    CSS - how to overflow from div to full width of screen

    How can I position two divs on the same line and have them act responsive?