3

I'm trying to create a background for a banner using css where one side has a color and on the other side has another one with a 45° cut like this

example

I've been able to recreate the above image except for the drop shadow that doesn't stay in the right position. Any advice would be greatly appreciated.

This is my code code:

#container {
  height: 100px;
  width: 400px;
  overflow: hidden;
  background-color: #2962ff;
}

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid #2196f3;
  border-right: 400px solid transparent;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
  box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
}
<div id="container">
  <div id="triangle-topleft"></div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
LoreSchaeffer
  • 123
  • 3
  • 10
  • 2
    I don't think this question is a duplicate of the linked question as the linked one doens't address the box-shadow issue. A solution to your problem would be to use a pseudo element (:before or :after) instead of your #triangle-topleft div, to set `position: relative;` on your container and then to apply this CSS to your pseudo element. `box-shadow: 0 0 20px 0px rgba(0,0,0,0.75); position: absolute; width: 250px; height: 100px; background: #2196f3; transform: skew(-45deg); left: -50px;` – Jake Dec 06 '18 at 10:57
  • Chech this handy gradient generator http://www.colorzilla.com/gradient-editor/, it even has some presets that are pritty similar to what you want and it will give you the code for most browsers – arieljuod Dec 06 '18 at 15:30

3 Answers3

2

The CSS triangle trick with border can not be used for this, as a shadow will still be applied to the box, and not only to the triangle.

You will have to create a pseudo element, rotate it and THEN apply shadow to it.

#container {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: grey;
}

#container:before { 
  content: '';
  position: absolute;
  left: 20%;
  width: 100%; 
  height: 200%; 
  background-color: rgb(255, 255, 255); /* fallback */
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: inset 0 0 20px 10px #333;
}
<div id="container"></div>

Basically you create a rectangle which is larger than the parent, then rotate it and apply a shadow. You can tweak the colors and rotation-degree for your needs

Demo: http://jsfiddle.net/b5TnZ/2032/

MrMaavin
  • 1,611
  • 2
  • 19
  • 30
elveti
  • 2,316
  • 4
  • 20
  • 27
  • This is working only for some resolution, to make it responsive have i to write cases with `@media screen and (max-width: xxpx) { ... }`? – LoreSchaeffer Dec 06 '18 at 13:01
0

You can try gradient like below:

#container {
  height: 150px;
  background:
    linear-gradient(135deg,#2962ff 49.8%,rgba(0,0,0,0.75) 50%, #2196f3 calc(50% + 10px));
  background-color:#2196f3;
}
<div id="container">
</div>

And simply replace the deg with to bottom right if you want the diagonal result:

#container {
  height: 150px;
  width:50%;
  background:
    linear-gradient(to bottom right,#2962ff 50%,rgba(0,0,0,0.75) 50%, #2196f3 calc(50% + 10px));
  background-color:#2196f3;
}
<div id="container">
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

You can add multiple color stops in Linear Gradients. Use two color set.

Gradient generated using Shapy

.canvas {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    min-width: 100%;
}

.gradient-canvas {
    max-height: 100%;
    max-width: 100%;
    width: 100%; 
    height: 100%;
    background: linear-gradient(127deg, rgb(31, 163, 209) 0%, rgb(31, 163, 209) 50%, rgb(25, 64, 208) 0%, rgb(46, 101, 223) 52%) 50% 50% / 100% 100% no-repeat;
}
<div class="canvas"><div class="gradient-canvas"></div></div>
Sumit Ridhal
  • 1,359
  • 3
  • 14
  • 30