Я пробовал всевозможные вещи, но я пытаюсь в основном этот прямоугольник с треугольной стороной справа. Я пытаюсь получить тень тени, а также иметь градиент на этом. Кто-нибудь знает, как я могу заставить градиент правильно отображаться справа справа, чтобы соответствовать прямоугольнику? Я использую границу для создания треугольника, который, как мне кажется, является одним из наиболее распространенных шаблонов для этого.
Любые предложения приветствуются. Я создал демонстрационный пример с правой стороны.
Демо: http://jsfiddle.net/techsin/g2x99/
Обновление (по вертикали): http://jsfiddle.net/techsin/g2x99/4/
http://jsfiddle.net/techsin/g2x99/2/
Было бы намного проще использовать изображение здесь... или SVG или холст.
Еще один недостаток этого заключается в том, что фон углов не прозрачен.
body {background-color: #eee;}
.box {
width: 100px;
height: 40px;
background-color: rgb(115, 115, 202);
position: relative;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0, rgba(255, 255, 255,.2)),
color-stop(1, rgba(0, 0, 0,.6))
);
}
.box:before,
.box:after {
font-size: 0px;
content: ".";
position: absolute;
right: 0;
}
.box:before {
border-top: 20px solid transparent;
border-right: 15px solid #eee;
bottom: 0;
}
.box:after {
border-top: 20px solid #eee;
border-left: 15px solid transparent;
top: 0;
}