Javascript-форум - Загнутый угол с тенью

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Загнутый угол с тенью (https://javascript.ru/forum/xhtml-html-css/47696-zagnutyjj-ugol-s-tenyu.html)

Загнутый угол с тенью

Дизайнер придумал pop-up окно с вот таким углом.
Есть какие-то идеи, как это сделать максимально кроссбраузерно и семантично?
Пока на ум пришло только добавление под pop-up'ом трех элементов с тенями, один из которых повернут под углом и png с завернутым углом. Но хотелось бы какое-то решение покрасивее.

Кроссбраузенрно - только div'ы да png. А так можно было бы с трансформами да градиентами поиграть. А то и svg\css фильтрами.
P.S. Нехороший дизайнер.)

BETEPAH,
мысли вслух :write:

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">body{
    background:#DDD;
    font-size:24px;
  }

  #one{
    float:left;
    position:relative;
    width:0px;
    height:0px;
    background:transparent;
    border-right:145px solid transparent;
    border-top:100px solid #EEEEEE;
  }

  #five{
    margin:0px;
    position:absolute;
    left:-38px;
    top:-114px;
    display:block;
    color:#FA7C25;
    width:0px;
    height:0px;
    border-right:25px solid transparent;
    border-bottom:70px solid #FA7C25;
    border-left:155px solid transparent;
    -moz-transform:rotate(-34deg);
    -webkit-transform:rotate(-34deg);
    -ms-transform:rotate(-34deg);
    transform:rotate(-34deg);
    -o-transform:rotate(-34deg);
    box-shadow:0 10px 12px -6px #777;
  }

  #two{
    margin:0px;
    width:490px;
    height:400px;
    background:#EEEEEE;
    box-shadow:5px 5px 6px #777;
  }

  #tree{
    float:left;
    width:345px;
    height:100px;
    background:#EEEEEE;
    box-shadow:1px 4px 8px #777;
  }
  </style>
</head>

<body>
<div id="two"></div>
<div id="tree"></div><div id="one"><div id="five"></div></div>
</body>
</html>

рони,
Ага, как-то так и думал. Может все-таки забью на 8й IE...
Спасибо!

Цитата:

Сообщение от Aetae

P.S. Нехороший дизайнер.)

:cray:

Aetae,
ну что же ты так категорично, в ИЕ (старых) тоже есть фильтры трансформы...

вот веб-генератор для этих целей http://demos.aimweb.name/css-transform-generator/

devote,
отличная ссылка, спасибо!

P.S. Поставьте кто-нибудь плюсы devote и рони, а то я должен добавить отзыв кому-то ещё, прежде чем смогу снова добавить им

На самом деле основная проблема тут в тени. Неровные тени нормально можно только фильтром запилить. Если составлять из кусков - всё равно г-но выйдет.

Цитата:

Сообщение от Aetae

На самом деле основная проблема тут в тени.

ну тени тоже в ИЕ можно фильтрами сделать. Хотя не спорю, придется помучатся.

Только ff:

<style>
div{
    background: linear-gradient(-15deg, 
        transparent 0,
        transparent 14px,
        #ddd 15px,
        #ddd 100%);
    width:100px;
    height:100px;
    position:relative;
    filter:url(#f3);
    resize:both;
    overflow: hidden;
}
div:after{
    content: "";
    display:block;
    background: linear-gradient(15deg, 
        transparent 0,
        transparent 14px,
        #f70 15px,
        #f70 100%);
    transform: rotate(-30deg);
    width:58px;
    height:15px;
    position:absolute;
    bottom:0;
    right:0;
}
</style>
<svg height="0" width="0">
  <defs>
    <filter id="f3" x="-0.2" y="-0.2" width="200%" height="200%" >
      <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
</svg> 
<div contenteditable="true">div</div>

Хз как в других браузерах добиться такой же простоты.)

Цитата:

Сообщение от Aetae

На самом деле основная проблема тут в тени

На тень в IE8 я забил. Как по мне это незначительная "рюшечка", отсутствие которой не сильно портит внешний вид.
Ну и треугольник все-таки оставил в png-шке. В итоге получилось вот так

.t2_special-popup_footer {
    height: 31px;
    width: 300px;
    display: block;
    position: absolute;
    bottom: -19px;
    background: #fff;
  }
  .t2_special-popup_footer:after {
    display: block;
    position: absolute;
    right: -69px;
    content: '';
    height: 31px;
    width: 78px;
    background: url("/images/newd/special_popup_corner.png");
    -moz-transform:     rotate(-25deg) translateX(5px) translateY(-13px) scale(1);
    -o-transform:       rotate(-25deg) translateX(5px) translateY(-13px) scale(1);
    -webkit-transform:  rotate(-25deg) translateX(5px) translateY(-13px) scale(1);
    transform:          rotate(-25deg) translateX(5px) translateY(-13px) scale(1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9063077870366499, M12=0.42261826174069955, M21=-0.42261826174069955, M22=0.9063077870366499, SizingMethod='auto expand')";
    -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1);
  }

Еще раз всем огромное спасибо!