How to design a image through css

Question

I want to design this type image.

You know what? I'm confused. Are you asking how to make it with just HTML or is he asking how to put it in his HTML file? — , Feb 02 '17 at 04:39

score 3 · Answer 1 · answered Feb 02 '17 at 04:51

3

.container {
  background: #fff;
  padding: 20px;
}
.round {
  width: 100px;
  height: 100px;
  border: solid 2px #000;
  position: relative;
}

.round:before {
  content: '';
  width: 20px;
  height: 20px;
  background: #fff;
  border-bottom: solid 2px #000;
  position: absolute;
  top: -12px;
  left: -11px;
  transform: rotate(315deg);
}

.round:after {
  content: '';
  width: 20px;
  height: 20px;
  background: #fff;
  border-top: solid 2px #000;
  position: absolute;
  bottom: -12px;
  right: -11px;
  transform: rotate(315deg);
}

<div class="container">
 <div class="round"></div> 
</div>

hat do you think?

answered Feb 02 '17 at 04:51

grinmax

1,835
1
10
13

Cool solution! Only possible problem is if OP wants the shape to "scale", and have the corners scale too. If they do this would be a pain to make work using percentages – haxxxton Feb 02 '17 at 05:16
@haxxxton look this, hover mouse to continer https://jsfiddle.net/grinmax_/ru9rfzaL/2/ – grinmax Feb 02 '17 at 09:58
sure, using scale works :), the downside to using "covering" methods to do what OP is asking, is you have to make sure that the "covers" are the same color as the background.. especially given using `overflow:hidden` makes the borders appear over the corners again – haxxxton Feb 02 '17 at 11:38
@haxxxton look now https://jsfiddle.net/grinmax_/ru9rfzaL/3/ – grinmax Feb 02 '17 at 11:50
Thanks it is working. – Durgesh Dangi Feb 02 '17 at 11:53
@haxxxton Awesome! – grinmax Feb 02 '17 at 12:18
@grinmax, still gotta change a bunch of places to make it appear like the corners are transparent to the stuff behind them.. https://jsfiddle.net/07sf29L4/ and would definitely not work if there was an image behind it – haxxxton Feb 02 '17 at 14:16
@haxxxton Yes, this right, but i don't think what through svg are better solution https://jsfiddle.net/grinmax_/dzzya3tt/2/ – grinmax Feb 02 '17 at 16:14

score 0 · Answer 2 · answered Feb 02 '17 at 05:15

Perhaps look at using an inline svg image, this would give you control over background image, and would allow for the shape to "scale", and if you like, change the background color (fill) when you like.

HTML

<div class="cornered-box">
    <div class="svg-cont">
        <svg width="200px" height="200px" viewBox="635 375 202 202" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs>
                <polygon id="path-1" points="675.163277 376 836 376 836 535.221624 796.221624 575 636 575 636 414.163277"></polygon>
            </defs>
            <use stroke="#000000" stroke-width="2" fill="transparent" xlink:href="#path-1"></use>
        </svg>
    </div>
    <div class="cornered-box-content">
        <p>
            Some content for the box
        </p>
    </div>
</div>

CSS

.cornered-box{
    height:200px;
    width:200px;
    position: relative;
    padding:20px 5px;
    box-sizing:border-box;
}
.cornered-box .svg-cont{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:-1;
}
.cornered-box .svg-cont svg{
    height:100%;
    width:100%;
}
.cornered-box .svg-cont svg use{
    fill:transparent;
    transition: fill 0.2s ease-in-out;
}
.cornered-box:hover .svg-cont svg use{
    fill:#F00;
}

JSFIDDLE

Link to SVG

How to design a image through css

2 Answers2