how to taper a div/flexbox?

[candycanearter07]

hi!

how would you go about making a div tapered on one side? preferably something that works with a flexbox but im not sure where to start with this

example:

[xixxii]

you can use borders to do that! w3schools has a section for making different shapes with css here! 

[candycanearter07]

you can use borders to do that! w3schools has a section for making different shapes with css here! 

thanks, but its not working properly at all.. it seems to only taper the actual border part, instead of the full height of the box

[xixxii]

thanks, but its not working properly at all.. it seems to only taper the actual border part, instead of the full height of the box

could you post the code you used? it's hard to figure out what needs to be fixed just based on a picture!

[candycanearter07]

could you post the code you used? it's hard to figure out what needs to be fixed just based on a picture!

Code

border-bottom: 5px solid red
border-right: 20px solid transparent

[xixxii]

Code

border-bottom: 5px solid red
border-right: 20px solid transparent

my guess is that you misunderstood how the code works? taking their trapezoid as an example;

Code

.trapezoid {
	border-bottom: 50px solid #555;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 125px;
}

the shape you see is made entirely of borders; that's why the height is 0! the 50 pixel tall bottom border makes up the body of the shape, and the transparent left and right borders are creating slices in that bottom border. the trapezoid shape comes from the corners where the (invisible) left and right borders meet the bottom border! if you change the color from "transparent" to "green" (or any other color), that might help it make more sense how it's working.
if you want your tapered div to have a black background and a red outline, that's more complicated and will require a different method i think!

[candycanearter07]

my guess is that you misunderstood how the code works? taking their trapezoid as an example;

Code

.trapezoid {
	border-bottom: 50px solid #555;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 125px;
}

the shape you see is made entirely of borders; that's why the height is 0! the 50 pixel tall bottom border makes up the body of the shape, and the transparent left and right borders are creating slices in that bottom border. the trapezoid shape comes from the corners where the (invisible) left and right borders meet the bottom border! if you change the color from "transparent" to "green" (or any other color), that might help it make more sense how it's working.
if you want your tapered div to have a black background and a red outline, that's more complicated and will require a different method i think!

oh :( any idea how to do it in a different method then? sorry

[xixxii]

oh :( any idea how to do it in a different method then? sorry

you could use an image background or an svg polygon, or layer the black div on top of a red div that's the same shape but bigger maybe... maybe something with clip-path would work, since it seems like that's similar to making an svg, but i've never used it before so i'm not sure i really get it or how it's different from svgs.

[candycanearter07]

update: I have gotten things even worse and more messy please help please i dont understand this at all and i am tired

thank god for git

heres the current code:

Code

  1 <div id="player">
  2     <div>
  3         <div id="player-inner">
  4             <span id="player-text"></span>
  5             <a href="javascript:void(0)" onClick="stopPlayer()">stop</a>
  6             <a href="javascript:void(0)" onClick="MIDIjs.play('/assets/mid/c
    anyon.mid')">play</a>
  7         </div>
  8         <img src="/assets/images/decor/taper.png">
  9     </div>
 10 </div>

Code

79 #player {
 80     position: fixed;
 81     bottom: 8vh; left: 4vw;
 82     padding: 10px;
 83     gap: 10px;
 84     width: 25vw;
 85
 86     transform: rotate(3deg);
 87     z-index: 5;
 88 }
 89
 90 #player-inner {
 91     background-color: black;
 92     border-bottom: 5px solid red;
 93 }
 94
 95 #player * {
 96     color: white;
 97     text-decoration: none;
 98 }
 99
100 #player div {
101     display: flex;
102     justify-content: flex-end;
103     overflow: auto;
104
105 }
106
107 #player img {
108     float: right;
109     display: absolute;
110     right: 0;
111     text-align: right;
112 }

[Melooon]

Ooph ~ I decided to finally figure this one out since Iv never actually known how to do this 

So this might not be a perfect soloution; but it does work and I think you can modify it to fit most needs!

HTML is a simple DIV with some text in it:

Code

<div class="taper">HELLO</div>

CSS ~ use use the ::after selector to add an empty virtual triangle made using the method @xixxii suggested, and then we position it 100px to the right of the origonal div ~ the result is a tapered div! You'd need to modify the offsets and sizes to suit your content, but that should be pretty simple! (this does not allow for resizing divs, but maybe you can figure that out and post about it here!  )

Code

.taper {
  background-color: red;
  width: 100px;
  height: 50px;
  position: relative;
}

.taper::after {
  content: '';
  border-style: solid;
  border-width: 50px 0 0 50px;
  border-color: transparent transparent transparent red;
  position: absolute;
  top: 0;
  left: 100px;
}

[candycanearter07]

Ooph ~ I decided to finally figure this one out since Iv never actually known how to do this 

So this might not be a perfect soloution; but it does work and I think you can modify it to fit most needs!

HTML is a simple DIV with some text in it:

Code

<div class="taper">HELLO</div>

CSS ~ use use the ::after selector to add an empty virtual triangle made using the method @xixxii suggested, and then we position it 100px to the right of the origonal div ~ the result is a tapered div! You'd need to modify the offsets and sizes to suit your content, but that should be pretty simple! (this does not allow for resizing divs, but maybe you can figure that out and post about it here!  )

Code

.taper {
  background-color: red;
  width: 100px;
  height: 50px;
  position: relative;
}

.taper::after {
  content: '';
  border-style: solid;
  border-width: 50px 0 0 50px;
  border-color: transparent transparent transparent red;
  position: absolute;
  top: 0;
  left: 100px;
}

t thx! i uh didnt realize you could set the position to absolute

also i changed it to right: -40px