Эффекты с border

Делаем с border’ом разные интересные эффекты.

Стрелки CSS

Для дизайна элементов сайта часто нужны стрелки, сделать их можно средствами чистого CSS, псевдоклассами after и before.

Верстка и css

<div class="arrow arrow-top">Стрелка вверх</div>

<div class="arrow arrow-bottom">Стрелка вниз</div>

<div class="arrow arrow-left">Стрелка влево</div>

<div class="arrow arrow-right">Стрелка вправо</div>


<div class="arrow arrow-top-left" style="width: 25%;">Стрелка вверх-влево</div>

<div class="arrow arrow-top-right" style="width: 25%;">Стрелка вверх-вправо</div>

<div class="arrow arrow-bottom-left" style="width: 25%;">Стрелка вниз-влево</div>

<div class="arrow arrow-bottom-right" style="width: 25%;">Стрелка вниз-вправо</div>

.arrow {
position:relative; 
background-color:yellowgreen; 
color:#fff; 
text-align: center; 
padding: 20px 2%; 
margin: 30px auto; 
width: 50%;
}

.arrow-bottom:after {
  content: '';
  position: absolute;
  bottom: -10px;
  border: 10px solid transparent;
  border-top-color: yellowgreen;  
  border-bottom: 0;
  left: 48%;		
  }
	
.arrow-right:after {
  content: '';
  position: absolute;
  right: -10px;
  top: 17px;
  border: 10px solid transparent;
  border-left-color: yellowgreen;  
  border-right: 0;
  }
		
.arrow-top:before {
    content: '';
    position: absolute;
    top: -10px;
    border: 10px solid transparent;
    border-bottom-color: yellowgreen;
    border-top: 0;
    left: 48%;
  }
			
.arrow-left:before {
  content: '';
  position: absolute;
  left: -10px;
  top: 17px;
  border: 10px solid transparent;
  border-right-color: yellowgreen;  
  border-left: 0;
  }



.arrow-top-right:before {
  content: '';
  position: absolute;
  top: 0px;
  right: -10px;
  border: 10px solid transparent;
  border-top-color: yellowgreen;  
  border-bottom: 0;
  border-left: 0;				
  }
	
.arrow-top-left:before {
  content: '';
  position: absolute;
  top: 0px;
  left: -10px;
  border: 10px solid transparent;
  border-top-color: yellowgreen;  
  border-bottom: 0;
  border-right: 0;
  }
		
.arrow-bottom-left:after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: -10px;
  border: 10px solid transparent;
  border-bottom-color: yellowgreen;  
  border-top: 0;
  border-right: 0;
  }
			
.arrow-bottom-right:after {
  content: '';
  position: absolute;
  bottom: 0px;
  right: -10px;
  border: 10px solid transparent;
  border-bottom-color: yellowgreen;  
  border-top: 0;
  border-left: 0;
  }

border по углам

Эффект достигается двумя псевдо-элементами:

#main-title:before {
    position: absolute;
    width: 50px;
    height: 50px;
    content: '';
    border-color: #414649;
    border-style: solid;
    left: 0px;
    top: 0px;
    border-width: 5px 0 0 5px;
}

#main-title:after {
    position: absolute;
    width: 50px;
    height: 50px;
    content: '';
    border-color: #414649;
    border-style: solid;
    right: 0px;
    bottom: 0px;
    border-width: 0 5px 5px 0;
}

У #main-title в свойствах должен быть указан position.

Если нужны рамки по четырем сторонам, нужно добавлять еще один слой (позаимствованное решение):

Вёрстка:

<div class="block">
  <div class="border"></div>
</div>

Стили:

.block {
  background: #066fff;
  width: 300px;
  height: 180px;
  margin: 20px auto;
  position: relative;
}

.border {position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}

.block:before, .block:after, .border:before, .border:after {
  position: absolute;
  width: 18px;
  height: 18px;
  content: '';
  border-color: #082346;
  border-style: solid;
}

.block:before {left: 0px; top: 0px; border-width: 9px 0 0 9px;}

.block:after {right: 0px; top: 0px; border-width: 9px 9px 0 0;}

.border:before {right: 0px; bottom: 0px; border-width: 0 9px 9px 0;}

.border:after {left: 0px; bottom: 0px; border-width: 0 0 9px 9px;}

Градиентный border

Стили:

color: #fff;
padding: 40px;
border: double 3px transparent;
border-radius: 25px;
background-image: linear-gradient(#0C0C0C, #0C0C0C), radial-gradient(circle at top left, #F3DC80,#8d6e3d, #c3a860);
background-origin: border-box;
background-clip: padding-box, border-box;

Поделиться в соц. сетях: