Лого SiteHere.ru

Загинаем угол на CSS3

Эффект загнутого угла на CSS3

В этом уроке мы создадим эффект загнутого угла без использования изображений и дополнительной разметки. Данный эффект будет хорошо работать во всех современных браузерах.

Пример данного эффекта можно увидеть здесь:

Посмотреть примерСкачать

Браузеры, которые полноценно поддерживают данный эффект: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.

HTML часть

Код HTML очень простой, мы помещаем текст внутри блока <div> с классом note:

1
2
3
<div class="note">
    <p>Текст блока</p>
</div>

CSS часть

Сперва нам для блока необходимо сделать позиционирование relative, чтобы мы могли внутри позиционировать другие элементы:

1
2
3
4
5
6
7
8
9
.note {
    position:relative;
    width:480px;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    background:#97C02F;
    overflow:hidden;
}

А сейчас, собственно, «загнем» угол нашего блока:

1
2
3
4
5
6
7
8
9
10
11
.note:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 16px 16px 0;
    border-style:solid;
    border-color:#fff #fff #658E15 #658E15;
    background:#658E15;
    display:block; width:0;
}

И добавим тень:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.note:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 16px 16px 0;
    border-style:solid;
    border-color:#fff #fff #658E15 #658E15;
    background:#658E15;
    display:block; /* Это свойство для того чтобы Firefox 3.0 правильно отображал позиционирование */
    width:0; /* Это свойство для того чтобы Firefox 3.0 правильно отображал позиционирование */
 
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

Вот мы и создали простой эффект загнутого угла. В примерах есть блок с закругленными углами. Делается это следующим образом:

1
2
3
4
5
.note.rounded {
    -webkit-border-radius:5px 0 5px 5px;
    -moz-border-radius:5px 0 5px 5px;
    border-radius:5px 0 5px 5px;
}

Вывод

Этот красивый эффект можно сделать в считанные минуты, зная каким образом его создавать. В то же время он придаст оригинальность вашему сайту, если правильно его применить.

Успехов!

Источник: nicolasgallagher.com

Новые кейсы и статьи по digital маркетингу
5 комментариев к записи
  • junothan

    как сделать чтобы  блок растягивался по содержимому

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Выезжающее меню</title>
        <script type="text/javascript" src="js/jquery.js"></script>
    
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
        
        <script type="text/javascript">
        (function ($) {
    	$(window).load(function(){
            $("[data-toggle]").click(function() {
              var toggle_el = $(this).data("toggle");
              $(toggle_el).toggleClass("open-sidebar");
            });
             $(".swipe-area").swipe({
                  swipeStatus:function(event, phase, direction, distance, duration, fingers)
                      {
                          if (phase=="move" && direction =="right") {
                               $(".container").addClass("open-sidebar");
                               return false;
                          }
                          if (phase=="move" && direction =="left") {
                               $(".container").removeClass("open-sidebar");
                               return false;
                          }
                      }
              }); 
          });
        }) (jQuery);
    	</script>
    
    	
    	
    	
    	
    	
    	
    
    	</head>
    <body>
       <header id="header"><div><?php print render ($page['header']);?></div>
     
    
       
       </header>
       <div class="container">
          <div id="sidebar">
              <ul>  
                  <li><?php print render($page['lvm']);?></li>
    			  <li><?php print render($page['menu']);?></li>
              </ul>
          </div>
          <div class="main-content">
              <div class="swipe-area"></div>
              <a href="#" data-toggle=".container" id="sidebar-toggle">
                  <span class="bar"></span>
                  <span class="bar"></span>
                  <span class="bar"></span>   
              </a>
              <div class="content">
    			  
                <div class="note"> <?php print render($page['content']);?></div>
                   
              </div>
          </div>
        </div>  
    /* <footer id="аfooter"><?php print render($page['footer']);?></footer>	 */
    </body>
    </html>
    body, html {
             /*  height: 100%; */
              margin: 0;
              overflow:hidden;
              font-family: helvetica;
              font-weight: 100;
          }
          .container {
              position: relative;
              height: 100%;
              width: 100%;
              left: 0;
              -webkit-transition:  left 0.4s ease-in-out;
              -moz-transition:  left 0.4s ease-in-out;
              -ms-transition:  left 0.4s ease-in-out;
              -o-transition:  left 0.4s ease-in-out;
              transition:  left 0.4s ease-in-out;
          }
          .container.open-sidebar {
              left: 240px;
          }
          
          .swipe-area {
              position: absolute;
              width: 50px;
              left: 0;
          top: 0;
              height: 100%;
              background: #f3f3f3;
              z-index: 0;
          }
          #sidebar {
              background: #38B2CE;
              position: absolute;
              width: 240px;
              height: 100%;
              left: -240px;
              box-sizing: border-box;
              -moz-box-sizing: border-box;
          }
          #sidebar ul {
              margin: 0;
              padding: 0;
              list-style: none;
          }
          #sidebar ul li {
              margin: 0;
          }
          #sidebar ul li a {
              padding: 15px 20px;
              font-size: 16px;
              font-weight: 100;
              color: white;
              text-decoration: none;
              display: block;
              border-bottom: 1px solid #38B2CE;
              -webkit-transition:  background 0.3s ease-in-out;
              -moz-transition:  background 0.3s ease-in-out;
              -ms-transition:  background 0.3s ease-in-out;
              -o-transition:  background 0.3s ease-in-out;
              transition:  background 0.3s ease-in-out;
          }
          #sidebar ul li:hover a {
              background: #FF7F00;  
          }
          .main-content {
              width: 100%;
              height: 100%;
              padding: 10px;
              box-sizing: border-box;
              -moz-box-sizing: border-box;
              position: relative;
          }
          .main-content .content{
              box-sizing: border-box;
              -moz-box-sizing: border-box;
          padding-left: 60px;
          width: 100%;
          }
          .main-content .content h1{
              font-weight: 100;
          }
          .main-content .content p{
              width: 100%;
              line-height: 160%;
          }
          .main-content #sidebar-toggle {
              background: #FF7F00;   
              border-radius: 3px;
              display: block; 
              position: relative;
              padding: 10px 7px;
              float: left;
          }
          .main-content #sidebar-toggle .bar{
               display: block;
              width: 18px;
              margin-bottom: 3px;
              height: 2px;
              background-color: #fff;
              border-radius: 1px;   
          }
          .main-content #sidebar-toggle .bar:last-child{
               margin-bottom: 0;   
          }

     

     
  • junothan

    блок растягивается но только до низа экрана дальше содержимое обрезается и не прокручивается как это исправить?

     
  • Максим

    А как сделать уголок в другом месте (например, сверху-слева или снизу-справа)?

    Пробовал "поиграть" с классом .note:before, но что-то ничего не выходит. Как я понял свойство border-width меняет только размер уголка. Я пытался попереставлять цифры в его значении, думал так будет меняться направление уголка, но выходит какая-то белиберда. Сам уголок перекинуть в нужное место я могу (с помощью свойств top, bottom, left, right, а вот развернуть его не получается. Получилось только  с помощью transform: rotate(XXdeg), но там вроде для каждого браузера надо прописывать, длинноватый код получается, да и потом тень тоже надо перестраивать (если она например, вниз больше падает).

    Короче не удалось мне придумать как нормально переставить уголок. Если можете подскажите, буду благодарен.

     
    • Юрий Немец

      Здравствуйте, Максим!

      Вот код для уголка слева вверху:

      .note:before {
          background: #658e15 none repeat scroll 0 0;
          border-color: #fff #658e15 #fff #fff;
          border-style: solid;
          border-width: 16px 16px 0 0;
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
          content: "";
          display: block;
          left: 0;
          position: absolute;
          top: 0;
          width: 0;
      }

      Вы верно определили класс, но нужно также менять еще свойства border-color и border-width. Тень также можно поправить.

       
  • Максим

    Спасибо. Теперь стало понятнее: значит, кроме свойств border-width, которым я пытался манипулировать, и top (bottom),  left (right), надо еще поиграть с цветом треугольников, образующих уголок.

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *