Picture featuring a right-angled triangle on the right side

Question

Picture featuring a right-angled triangle on the right side

I have been experimenting with creating a complex image effect using CSS only, without any JavaScript. Despite several attempts, I haven't been able to achieve the desired outcome yet.

https://i.sstatic.net/sUEaJ.jpg

CSS

.container{
    width: 500px;
    background-color: #0c2f45;
}

.image-container {
    background-color: #194c6e;
    width: 266px;
}

.image-container img{
    width: 250px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

Check out my code on jsfiddle

css css-shapes

Answer 1

Answer №1

To achieve a similar effect, you can utilize transformed pseudo elements to create a triangular shape. By skewing these pseudo elements, the desired visual can be accomplished.

Below is a brief demonstration:

div {
  height: 200px;
  width: 300px;
  background: url(http://lorempixel.com/300/200);
  position: relative;
  overflow: hidden;
}
div:before,
div:after {
  content: "";
  position: absolute;
  height: 50%;
  width: 20%;
  background: tomato;
  border-left: 10px solid firebrick;
  left: 80%;
}
div:before {
  top: 0;
  transform: skewX(10deg);
}
div:after {
  top: 50%;
  transform: skewX(-10deg);
}

<div></div>

^{* Please note that this method assumes you want a solid color on the right side of the element}

Answer 2

To achieve a similar effect, you can utilize transformed pseudo elements to create a triangular shape. By skewing these pseudo elements, the desired visual can be accomplished.

Below is a brief demonstration:

div {
  height: 200px;
  width: 300px;
  background: url(http://lorempixel.com/300/200);
  position: relative;
  overflow: hidden;
}
div:before,
div:after {
  content: "";
  position: absolute;
  height: 50%;
  width: 20%;
  background: tomato;
  border-left: 10px solid firebrick;
  left: 80%;
}
div:before {
  top: 0;
  transform: skewX(10deg);
}
div:after {
  top: 50%;
  transform: skewX(-10deg);
}

<div></div>

^{* Please note that this method assumes you want a solid color on the right side of the element}

Picture featuring a right-angled triangle on the right side

Answer №1

Similar questions

Unable to create a horizontal navigation bar

Placing an emblem after the header wording

Blank area located at the bottom of the document

Scrolling animations do not support the Translate3d feature

What methods does the W3C CSS Validator use to recognize a CSS3 document?

margin-top: automatic adjustment, with a minimum of 50 pixels

Is there a way to keep my footer fixed to the bottom of the page in Google Chrome?

The link in the HTML code has been prevented from opening in a new

Is CSS General sibling selector not functioning properly when used with :focus?

Tips on keeping a Material UI menu item open when clicked

How to perfectly center a dropdown menu using CSS across different web browsers

What steps should I follow to make a sticker adhere to a div?

Animating elements within Firefox can sometimes cause adjacent elements to shift positions

Tips for centering the second content within a div block

Achieving text alignment with icons in Angular

Ways to implement CSS styling to every input element excluding inputs located within list items of a specific class

What is the best way to place an image above a step progress bar?

My navigation menu has a nested ul, but on mobile devices, it doesn't display all the items in the list. What could be causing

Designing a website using HTML and CSS with the goal of optimizing it to fill

Aligning inline form controls with Bootstrap and Syncfusion widgets