эффект угловой ленты на блоке
добрый день, всем!
друзья, помогите с таким вопросом - как с помощью CSS сделать на углу блока эффект простой ленты... в виде двух линий под углом 45 градусов.. (вроде каким-то образом с использованием :before или :after) Спасибо! П,С. сорри, что без рисунка, но надеюсь, что понятно и так о чем речь... если нужен будет рисунок, то пишите, что-нибудь нарисую :) |
DennisMatveyev,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body,html{
width: 98%;
height: 90%;
}
html:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
display: block;
width: 0;
height: 0;
border-bottom: 120px solid #006633;
border-left: 120px solid transparent;
}
body:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
display: block;
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
body:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
display: block;
width: 0;
height: 0;
border-bottom: 80px solid #FFFFFF;
border-left: 80px solid transparent;
}
</style>
</head>
<body>
</body>
</html>
|
спасибо, большое!... офигеть... я правда пока не понял как это происходит... :)) буду щаз разбираться... еще раз спасибо!
|
рони,
Круто, не знал такой техники, что у широких бордеров срез под 45° |
Рони, а зачем вставляется пустой content?.. что это дает?
|
Цитата:
|
ага... спасибо... начинает доходить )...
|
| Часовой пояс GMT +3, время: 08:35. |