CODEWITHSUNDEEP
csshtml
Tom
Tom

Reputation: 85

How to make oblique endings of after and before elements?

you can see a pic below (I am really bad at painting, sorry for that). I don't know how to make these (I guess) box-shadows (pink in the picture) only on two corners, but their ending is oblique. Because what I think, those borders (red in the picture) on corners can be made with after and before elements. What I would do is to make two boxes, one inside the other and add a box shadow. But I stop at that point how to make those oblique endings and how to make those shadows shorter than the whole height or length. Maybe you have any ideas?

enter image description here

this is what i have tries so far:

.div2 {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 10px;
}

.div {
  position: relative;
  width: 60px;
  height: 50px;
  margin: 20px;
  box-shadow: 10px 10px;
}

.div2::before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: -10px;
  left: -10px;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}

span::after {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: -10px;
  right: -10px;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}
<div class="div">
  <div class="div2"><span></span></div>
</div>

Upvotes: 1

Views: 228

Answers (2)

Temani Afif
Temani Afif

Reputation: 272787

Here is my idea using multiple background and border-image

.box {
  width:150px;
  height:100px;
  border:15px solid transparent;
  border-image:linear-gradient(-45deg,pink 20%,transparent 20%,transparent 80%,pink 80%) 15;
  background:
    linear-gradient(red,red) top right,
    linear-gradient(red,red) top right, 
    linear-gradient(red,red) bottom left, 
    linear-gradient(red,red) bottom left,
    #00a2e8;
  background-size:2px 40px,40px 2px;
  background-origin:padding-box;
  background-repeat:no-repeat;
}
<div class="box"></div>

Here is another idea using less gradient:

.box {
  width:150px;
  height:100px;
  border:15px solid transparent;
  border-image:linear-gradient(-45deg,pink 20%,transparent 20%,transparent 80%,pink 80%) 15;
  background:#00a2e8;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:2px solid transparent;
  border-image:linear-gradient(30deg,red 20%,transparent 20%,transparent 80%,red 80%) 1;
}
<div class="box"></div>

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105873

about gradient see : https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.

about multiple background https://css-tricks.com/css-basics-using-multiple-backgrounds/ & https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds

You can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

background-size is also usefull here https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

background-clip comes handy too https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

The background-clip CSS property sets whether an element's background or extends underneath its border.

playing around with background-^properties you could do something like this 

.mybox {
  width:250px;
  height:180px;
  padding:20px;
  background:
    linear-gradient(0deg,rgb(237, 28, 36),rgb(237, 28, 36)),
    linear-gradient(0deg,rgb(237, 28, 36),rgb(237, 28, 36)),
    linear-gradient(0deg,rgb(237, 28, 36),rgb(237, 28, 36)),
    linear-gradient(0deg,rgb(237, 28, 36),rgb(237, 28, 36)),
    linear-gradient(0deg, rgb(0, 162, 232), rgb(0, 162, 232)),    
    linear-gradient(-45deg, rgb(255, 174, 201) 20%, rgb(0, 162, 232) 20%, rgb(0, 162, 232) 80%, rgb(255, 174, 201) 80%) ;
  background-clip: border-box, border-box,border-box, border-box, content-box,border-box;
  background-repeat:no-repeat;
  background-size:  3px 40px, 80px 3px, 3px 40px, 80px 3px,auto auto,auto auto;
  background-position: 22px 160px, 22px 200px , 260px 15px  , 180px 15px ,center,  center;
  
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:3rem;
  box-shadow: 20px 20px  10px purple
}
<div class="mybox"> My Box</div>

Upvotes: 2

Related Questions