6

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

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);
}
<div></div>

3 ответа 3

11

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;
}
<div></div>

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

9

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

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);
  */
}
<div></div>

4
  • 1
    хороший способ, но треугольник стал каким-то огроменным! я вот что подумал - что если сделать ромб и подложить его под блок?
    – Вася
    2 ноя 2016 в 15:13
  • @Вася честно говоря не знаю. Ведь блок тогда будет обнесен весь тенью. Стоит подождать пока кто еще ответит, может кто подскажет что хорошее 2 ноя 2016 в 16:06
  • @ElenaSemenchenko я вот как раз о вас думал! :) 2 ноя 2016 в 17:32
  • @ElenaSemenchenko У вас хороший опыт в верстке и css. Было бы интересно увидеть хороший правильный ответ от профессионала, а не от дилетанта вроде меня 2 ноя 2016 в 17:32
7

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

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);
}
<div></div>

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.