-1

I am wanting to create inline-block divs in CSS that have diagonal sides by having a top width of lets say 200px and a bottom width of 100px. Is this possible? If so, how? Or what would anyone suggest as a better alternative?

Dayley
  • 166
  • 1
  • 2
  • 13
  • 1
    Describe what you need. Background/border? You can always use SVG for that too. And this diagonal shape would be only visual, but actual space taken by element would still be rectangle. – Justinas Jul 13 '18 at 05:47
  • May be an image can convey you thoughts better. – Pons Purushothaman Jul 13 '18 at 06:15
  • Strictly speaking no. Particularly if we are talking in regards to content, e.g. Text lines are effectively a different length or cropping in image in a non-rectangular fashion. You can have non rectangular borders however. Also note you can skew a div but you will still end up with a parallelogram. – Jon P Jul 13 '18 at 06:37
  • Thanks for your answers. It is actually for a full width banner that is split into sections. Each section has different information. Please look at this image for the idea, but when the red lines are drawn is the side of the div. https://ibb.co/kWiXj8 – Dayley Jul 13 '18 at 07:20

3 Answers3

1

The box model of HTML implies that divs are always rectangles. However you can get a very decent result using some techniques. The simplest one is too use css to tint just the part of your background needed. You set the width to the wider side and then use the border-left right and bottom properties to adjust the shape. For example:

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

You can see it working here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_trapezoid The w3school also have a very interesting page with a lot of shapes you can create with css. Check it here: https://www.w3schools.com/howto/howto_css_shapes.asp

  • This is a good alternative! I think I may be able to work with this. Many thanks! Here is the idea I have in mind: https://ibb.co/kWiXj8 – Dayley Jul 13 '18 at 07:21
  • 2
    Here are some more advanced shapes : https://css-tricks.com/examples/ShapesOfCSS/ – Pascal Goldbach Jul 13 '18 at 08:13
  • 1
    @Dayley then check out this shape https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_parallel –  Jul 13 '18 at 11:15
  • Thanks for the list of shapes, they may also come in handy at some point Pascal. And thats the Shape I will be using this time Dknacht. Appreciated! – Dayley Jul 13 '18 at 16:15
0

Are you looking to create a trapezoid?

.trapezoid {
    border-top: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}


.trapezoid {
 border-top: 100px solid red;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 height: 0;
 width: 100px;
}
  
<div class="trapezoid">

</div>
caiovisk
  • 3,667
  • 1
  • 12
  • 18
-1

To use things like border and box-shadow; It is necessary to make a real trapezoid.

.trapezoid {
    /* trapezoid */
    width: 200px;
    height: 100px;
    transform: perspective(50px) rotateX(-25deg);

    /* other style */
    color: white;
    font-size: 23px;
    line-height: 60px;
    font-weight: bold;
    text-align: center;
    background: #5e5e5e;
    margin-left: calc(50% - 100px);
    border-left: 3px solid #46ff00;
    border-right: 3px solid #46ff00;
    border-bottom: 3px solid #46ff00;
    box-shadow: 0px 5px 10px #46ff00;
}

try it on black background ;)

VolkanCetinkaya
  • 645
  • 7
  • 13