Можно ли сделать тень вокруг треугольника с помощью стилей?

#html #css #css3

Есть блок со треугольником-указателем снизу и обводкой тени вокруг. Вопрос: можно
ли как-то с помощью стилей сделать тень вокруг треугольника, а не прозрачной подложке
на которой он лежит или это не возможно? Фидл



div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
div:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -13px;
  left: 35px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 15.5px 0 15.5px;
  border-color: yellow transparent transparent transparent;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}




    

Ответы

Ответ 1

Fiddle



div {
  background: yellow;
  position: relative;
  width: 100px;
  height: 100px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
div:after,
div:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12px;
  background: yellow;
  margin-left: -12px;
  width: 24px;
  height: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: -1;
  transform: rotate(45deg);
}
div:before {
  z-index: 1;
  box-shadow: none;
}





Более подробно - Треугольники через CSS


Ответ 2

Так, чтоб это смотрелось целостно при любой тени и произвольном треугольнике - возможно,
что нет. Но примерно, попробовать можно так:



div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
div:after {
  content: "";
    position: absolute;
    width: 0;
    height: 0;       
    bottom: -2em;
    left: 30px;
    box-sizing: border-box;        
    border: 1em solid black;
    border-color: transparent transparent yellow yellow;
    
    transform-origin: 0 0;
    transform: rotate(-45deg);        
    box-shadow: -3px 3px 5px 0 rgba(0, 0, 0, 0.2);

  /*
  content: "";
  display: block;
  position: absolute;
  bottom: -13px;
  left: 35px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 15.5px 0 15.5px;
  border-color: yellow transparent transparent transparent;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  */
}



Ответ 3

Есть с ромбиками, добавлю еще с треугольниками и размытием:



div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

div:after,
div:before {
  content: "";
  display: block;
  position: absolute;
  left: 35px; 
  width: 0;
  height: 0;
  border-left: 15.5px solid transparent;
  border-right: 15.5px solid transparent;
}

div:after { 
  z-index: 3;
  bottom: -13px;     
  border-top: 13px solid yellow;
}

div:before {
    z-index: -1;
    bottom: -15px; 
    border-top: 13px solid rgba(0, 0, 0, 0.3);
    -webkit-filter: blur(3px);
    filter: blur(3px);
}





P.S: У soledar10 правильнее решение!