0

I am using bootstrap 4 and trying to create this shape of a image:

The entire square is my image, but I'd like to cut off the red part or make it transparant in order to see the background-color. 

<div class="container">
   <div class="row">
       <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
           <img src="path/to/image" class="img-fluid" alt="Some text">
       </div>
   </div>
</div>

How would I accomplish this ?

web-tiki
  • 99,765
  • 32
  • 217
  • 249
Jason Hall
  • 75
  • 1
  • 8
  • The easiest way would be to make the image a png and just create the shape you want in photoshop, if you need to use CSS you can look into clipping or masking but those aren't widely supported – Benneb10 Oct 17 '16 at 12:55
  • I guess `Photoshop` is best answer of your question. – Abhishek Pandey Oct 17 '16 at 12:57

4 Answers4

5

CSS

This can be easily achieved using just CSS border-radius. Below is a simple example.

body {
  background: blue;
}
img {
  border-radius: 100% 20% 0% 0% / 15% 40% 0% 0%;
  overflow: hidden;
}
<img src="https://placekitten.com/200/200" />

Using your HTML provided, it's just as simple to add it in

body {
  background: blue;
}
img {
  border-radius: 100% 20% 0% 0% / 15% 40% 0% 0%;
  overflow: hidden;
}
<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
      <img src="https://placekitten.com/200/200" class="img-fluid" alt="Some text">
    </div>
  </div>
</div>

SVG / clip-path

An alternative is to use an SVG clip-path which is then used on your image.

This is slightly different to Persijn's answer but is along the same lines

body {
  background: red;
}
img {
  -webkit-clip-path: url("#shape_clip");
  clip-path: url("#shape_clip");
  width: 200px;
  height: 200px;
}
<svg width="0" height="0">
  <defs>
    <clipPath id="shape_clip" clipPathUnits="objectBoundingBox">
      <path d="M0,1 L1,1 L1,.3 Q1,0 .65,.1 L0,.25z" />
    </clipPath>
  </defs>
</svg>

<img src="https://placekitten.com/200/300" />
Stewartside
  • 20,378
  • 12
  • 60
  • 81
4

SVG

Complex shapes can be hard to achieve in CSS.
I would recommend using SVG to create this shape

<svg viewBox="0 0 100 100" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <clipPath id="clip">
    <path d="M5,20 
                         C0,20 70,10 70,10 
                         C70,10 85,10 85,30
                         V95
                         H5Z"/>
  </clipPath>
  <image clip-path="url(#clip)" xlink:href="https://placekitten.com/g/300/300" x="0" y="0" height="100%" width="100%"/>
</svg>
Persijn
  • 14,624
  • 3
  • 43
  • 72
  • This shape is practically what I need, how can I make sure I am using an actual image for this instead of a black color? 'Haven't dont much with svg and paths before – Jason Hall Oct 17 '16 at 13:17
  • @JasonHall added a image(kitten) and made the path into a clip-path instead :) – Persijn Oct 17 '16 at 13:30
  • This is exactly what I needed. If I put the SVG in a column from Bootstrap, is it possible to make it responsive for all sizes? – Jason Hall Oct 17 '16 at 15:05
  • SVG is default responsive for all sizes. @Stewartside svg answer is actually more responsive then mine. – Persijn Oct 17 '16 at 15:53
0

You could achieve this effect with SVG Image masking. I don't know the dimensions of your mask, but this link should help you along:

http://vanseodesign.com/web-design/svg-masking-examples-2/

Patrick Decoster
  • 3
  • 3
0

You can use something like below to get the desired effect, you will have to edit it to add a picture to it. But CSS before tags are your friend

UPDATED 

.clipboard, .shadowboard {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background-color: #d3d0c9;
    background-image: url(http://i1.wp.com/cdn.batman-news.com/wp-content/uploads/2014/06/Batman-News-Default.jpg);
    background-size: cover;
    background-position: center center;
        border-top-right-radius: 65px;
}
<div class="clipboard" style="-webkit-clip-path: polygon(0 31%, 100% -4%, 100% 100%, 0% 100%);clip-path: polygon(0 31%, 100% -4%, 100% 100%, 0% 100%);"></div>
Sphinx
  • 956
  • 7
  • 21