Cut Corners Using Css

Cut Corners using CSS

If the parent element has a solid color background, you can use pseudo-elements to create the effect:

div {    height: 300px;    background: red;    position: relative;}
div:before {    content: '';    position: absolute;    top: 0; right: 0;    border-top: 80px solid white;    border-left: 80px solid red;    width: 0;}

<div></div>

Cut corners of Image using css

Rotate the container 45 deg to the right,
set overflow hidden on it.
and make the height bigger so that it won't clip the undesired corners.

Rotate the image -45deg so that it is horizontal again.

And you are done:

body {  background-image: url('http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg');}.Image {  position: absolute;  width: 200px;  height: 400px;  transform: rotate(45deg);  overflow: hidden;  margin-top: -100px;}.Image img {  width: 100%;  height: 50%;  margin-top: 100px;  transform: rotate(-45deg);}.blackBg {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: rgba(0, 0, 0, 0.6);}

<div class="blackBg"></div>
<div class="Image">  <img src="http://www.w3schools.com/css/img_fjords.jpg"></div>

How to cut box corner Using CSS with transparent background?

Nearly the same solution as OriDrori's answer but more flexible (if you need fixed-width cutted corner).

This gradient will look the same regardless of .card width and height.

body {  background: purple;}
.card {  width: 200px;  height: 200px;  background: linear-gradient(135deg, transparent 20px, white 20px);}

<div class="card"></div>

How to cut a corner with CSS when background image is necessary?

You may use before/after element to make the bottom part like this :

.profile {position:relative;display:inline-block;margin:50px;border:1px solid #000;border-bottom:none;width:100px;height:200px;background:#ccc;}.profile:after {content:" ";position:absolute;border:1px solid #000;height:20px;width:80px;bottom:-20px;right:-1px;border-top:0;border-left:0;background:#ccc;}.profile:before {content:" ";position:absolute;border-bottom:1px solid #000;height:29px;width:29px;transform:rotate(45deg);bottom:-15px;left:6px;background:#ccc;}

<div class="profile"></div>

CSS 3: Transparent square-cut corner of (text) input element how to?

Easiest way is to add a div on each end and edit their borders. This way your search... placeholder isn't over the line, and you can add a button before then ending span to be a search icon.

.back {  padding:30px;  background-color:#c11;}.bottom-corner, input, .top-corner, .icon{  display:inline-block;  padding:3px 10px;  vertical-align:middle;}.icon{  background-color:#fff;  padding-top:10px;  height:23px;}.bottom-corner, .top-corner{  height: 20px;}.bottom-corner{    border-bottom: 10px solid transparent;    border-right: 10px solid #fff;    margin-right: -4px;}.top-corner{  margin-left:-4px;  border-top: 10px solid transparent;  border-left: 10px solid #fff;}input {  background-color:#fff;  border:0;  height:30px;  width:300px;}

<div class="back"><div class="bottom-corner"></div><input type="text" placeholder="Search ..." /><div class="icon">S</div><div class="top-corner"></div></div>

How to make image with cut corners?

Normally, if you just want to give an image rounded corners, you can declare a border-radius (without actually giving the image a border of any width).

If you are explicitly looking to create an image with cut-off corners like the one displayed in your question, you can achieve this effect with an ::after pseudo-element, which is transparent, has a border and is rotated 45 degrees.

In the example below there are three images.

The first image has no border, but it does have a border-radius
applied.
The second image has an ::after pseudo-element, which is transparent, has a white border and is rotated 45 degrees.
The third image is the same as the second image, but the border of the pseudo-element is red, so you can more clearly see what is going on and how the effect works.

img {width: 100px;height: 100px;background-color:rgb(0,0,0);}
div {display:inline-block;position:relative;width: 100px;height: 100px;margin-right:72px;}
div:nth-of-type(1) img {border-radius: 12px;}
div:nth-of-type(n+2)::after {content:'';display:block;position:absolute;top:-30px;left:-30px;width: 124px;height: 124px;border: 18px solid rgb(255,255,255);transform:rotate(45deg);}
div:nth-of-type(3)::after {border: 18px solid rgb(255,0,0);}

<div><img src="http://static.pexels.com/photos/67211/field-away-summer-sky-67211.jpeg" /></div><div><img src="http://static.pexels.com/photos/67211/field-away-summer-sky-67211.jpeg" /></div><div><img src="http://static.pexels.com/photos/67211/field-away-summer-sky-67211.jpeg" /></div>

Cut Corners Using Css