Форум

DennisMatveyev · #1 (**permalink**) 01.07.2015, 18:40

добрый день, всем!
друзья, помогите с таким вопросом - как с помощью CSS сделать на углу блока эффект простой ленты... в виде двух линий под углом 45 градусов.. (вроде каким-то образом с использованием :before или :after)
Спасибо!

П,С. сорри, что без рисунка, но надеюсь, что понятно и так о чем речь... если нужен будет рисунок, то пишите, что-нибудь нарисую

рони · #2 (**permalink**) 01.07.2015, 18:54

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>

DennisMatveyev · #3 (**permalink**) 01.07.2015, 19:57

спасибо, большое!... офигеть... я правда пока не понял как это происходит...

) буду щаз разбираться... еще раз спасибо!

Deff · #4 (**permalink**) 01.07.2015, 20:46

рони,
Круто, не знал такой техники, что у широких бордеров срез под 45°

DennisMatveyev · #5 (**permalink**) 01.07.2015, 20:47

Рони, а зачем вставляется пустой content?.. что это дает?

рони · #6 (**permalink**) 01.07.2015, 20:51

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

пустой content?.. что это дает?

убери увидишь ))) если нет content то и показывать нечего -- content не пустой -- там строка - а вот строка, да пустая

DennisMatveyev · #7 (**permalink**) 01.07.2015, 21:01

ага... спасибо... начинает доходить )...

Форум

Справочник

Discord чат

Курсы javascript