Giving a border-right box shadow

Question

I am trying to give the border of a triangle that I created using CSS shadow.

#triangle-topleft {
	  width: 0;
	  height: 0;
	  border-top: 300px solid blue;
	  border-right: 100px solid transparent;
  }

<div id="triangle-topleft" />

Run codeHide result

I tried, but can't give the correct border a shadow. Is there an easy css way to do this? The way it should look at the end (only better with the actual shadow).

Answer 1

You can use the filtercss rule .

#triangle-topleft {
      width: 0;
      height: 0;
      border-top: 300px solid blue;
      border-right: 100px solid transparent;
      filter: drop-shadow(3px 3px 3px hsla(0, 0%, 0%, 1));
  }

<div id="triangle-topleft" />

Run codeHide result

Answer 2

You can create a triangle using another method. Here I turned and placed divinside the container withoverflow: hidden

You can set box-shadowon a rotating divand adjust the values ​​to get the desired view.

#triangle-topleft {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

#triangle-topleft div {
  background: blue;
  width: 100%;
  height: 300px;
  transform: rotate(290deg);
  position: absolute;
  top: -35%;
  left: -80%;
  box-shadow: 4px 4px 8px red;
}

<div id="triangle-topleft">
  <div></div>
</div>

Run codeHide result

Answer 3

( ).

linear-gradient .

#triangle-topleft {
  width: 100px;
  height: 300px;
  /* gradient for triangle */
  background-image: linear-gradient(to right bottom, blue 50%, transparent 50%);
  position: relative;
}

#triangle-topleft:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  /* gradient for shadow */
  background-image: linear-gradient(to right bottom,
    rgba(17, 17, 17, 0.7) calc(50% - 5px),
    rgba(17, 17, 17, 0) 50%,
    transparent 50%);
  transform: translate(5px, 5px);
  z-index: -1;
}

<div id="triangle-topleft"></div>

Hide result

---

"", linear-gradient. , 5px . -:

#triangle-topleft {
  /* desired width + red line width */
  width: 105px;
  height: 300px;
  /* subtract red line width using calc functon */
  background-image: linear-gradient(to right bottom,
    blue calc(50% - 5px),
    red calc(50% - 5px),
    red 50%, transparent 50%);
}

<div id="triangle-topleft"></div>

Hide result

:

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 300px solid blue;
  border-right: 100px solid transparent;
  position: relative;
}

#triangle-topleft:after {
  content: "";
  position: absolute;
  top: 15px;
  border-top: 315px solid red;
  border-right: 105px solid transparent;
  transform: translate(0, -100%);
  z-index: -1;
}

<div id="triangle-topleft"></div>

Hide result

Answer 4

- ?

#triangle-topleft {
  position: relative;
  width: 0;
  height: 0;
  border-top: 300px solid blue;
  border-right: 100px solid transparent;
}

#triangle-topleft::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 300px solid red;
  border-right: 100px solid transparent;
  transform: translate(5px, -100%);
  z-index: -1;
}

#triangle-topleft::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 5px;
  height: 15px;
  background-color: red;
  z-index: -1;
}

, , 2 - - ::before ::after, , .

: http://jsbin.com/fezutuhulo/edit?html,css,output