Лого www.SiteHere.ru

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

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

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

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

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

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

HTML часть

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

1
2
3
4
5
6
7
8
9
10
<div class="note">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris 
    pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem
    magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc 
    posuere dolor eu mauris feugiat dignissim.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris 
    pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem
    magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc 
    posuere dolor eu mauris feugiat dignissim.</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

Загинаем угол на CSS3 3.00/5 (60.00%) 2 голос(ов)

Понравилась статья - расскажи друзьям! :)

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 не будет опубликован. Обязательные поля помечены *