How do I add colored corners to a background image?

StackOverflow https://stackoverflow.com/questions/23547004

  •  18-07-2023
  •  | 
  •  

Question

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>
Was it helpful?

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 :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top