Exore LTD » CSS3 » Загинаем угол на CSS3
Лого SiteHere.ru

Ноябрь 10, 2019 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

Загинаем угол на 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

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

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