CSS. Срезать углы блока. Как сделать подобие стрелки?

Друзья. Нужна ваше помощь. Не как не могу придумать, как лучше реализовать подобное:
ссылка на скрин: https://send.firefox.com/download/29f29ccc1edc8bef...

Пробовал разные способы и везде загвоздка в том что, не получается добавить border. Прошу вашей помощи в решении данной проблемы. Заранее благодарен за помощь!
  • Вопрос задан
  • 312 просмотров
Решения вопроса 1
cesnokov
@cesnokov
<head>&nbsp;</head>
<html>
<head>
	<style type="text/css">
		.btn {
			display: block;
			width: 300px;
			height: 50px;
			background: #003399;
			text-align: center;
			padding: 30px 40px 0 40px;
			position: relative;
			margin: 0 10px 0 0; 
			color: #fff;
		}
		.btn:after {
			content: "";  
			border-top: 40px solid transparent;
			border-bottom: 40px solid transparent;
			border-left: 40px solid #003399;
			position: absolute; right: -40px; top: 0;
		}
	</style>
</head>
<body>
	<a class="btn">NEXT</a>
</body>
</html>


Имитация бортика:

.btn {
			display: block;
			position: relative;
			width: 300px;
			height: 35px;
			background: #003399;
			border: 2px solid #3399cc;
			border-radius: 5px;
			text-align: center;
			padding: 15px 20px 0 0;
			color: #fff;
		}
		
		.btn:after {
			content: "";
			position: absolute;
			width: 38px;
			height: 38px;
			transform: rotate(45deg);
			right: -18px;
			top: 5px;
			background: #003399;
			border-top: 2px solid #3399cc;
			border-right: 2px solid #3399cc;
			border-radius: 5px;
		}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы