How to get this partially diagonal shape from an image in CSS


Tags: html,css,twitter-bootstrap,css3,css-shapes

Problem :

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 ?



Solution :

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>


    CSS Howto..

    How i can display the output of a rss feed in HTML format in a TWebBrowser?

    How to center social buttons in bootstrap login page?

    How do I add inline css to dropdown in Yii?

    CSS How to generate this Shape on a Div or on Canvas

    How to turn off :hover with CSS?

    How do I light up an entire single row by hovering on a span in one of the columns?

    CSS: How do I select CSS for all the
  • elements that do have not been styled yet?
  • How to build the whole web site from css design [closed]

    How can I make my CSS update consistently? [closed]

    How does JS DOM manipulation affect CSS rule matching?

    How to disable webkit-text-size-adjust with JavaScript

    How to edit HTML with CSS? [closed]

    How to stack smaller text in CSS?

    How would I control the position of a drop down select menu?

    How to use a CSS Framework with Yesod?

    How to hover over the whole button in css

    How to enlarge footer on mobile only?

    How do I vertically align text inside an anchor element, which is nested within an unordered list

    CSS - How to create a table cell with a two-colour background?

    how to force 100% height on a dynamic drive css fluid/fixed layout

    how to center align IMG in div?

    How to use horizontal scroll when you have way many columns

    How to set CSS3 ::selection using Javascript

    How can I create a good-looking responsive image gallery WITHOUT perfectly sized images?

    Hover over a pre - how to highlight a single line with plain CSS?

    Fullpage.js: How to add css class “active” to slide anchor

    How do I remove the white spaces around my dashboard header on reactjs

    How to control CSS cache?

    How to display block from left to right in css

    How to set CSS width so that the element will have the exact window width?