copyloc
@copyloc
Человек то я не глупый, просто притворяюсь

Как сделать метку, как у хабрахабр

Все больше и больше нахожу у хабрахабра интересные способы оформления страниц, уже давно хотел сделать метки, как у него, которые у заголовка. Поле вокруг текста сделать не сложно, но как вырезать этот уголок? Буду рад если еще и объясните.

ecCsozG.pngВидимо меня не поняли, мне нужно чтобы ы точь-точь также было, чтобы этого треугольника не было, это можно сделать на css? Или это просто картинка впихнута?
  • Вопрос задан
  • 2873 просмотра
Решения вопроса 2
Как вариант:
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            
            *{margin: 0;padding: 0;}
            body{
                padding: 50px;
            }
            .bm{
                height: 20px;
                width: 100px;
                background: pink;
                border-radius: 4px 0 0 4px;
                display: inline-block;
            }
            
            .bm:after{
                content: "";
                display: inline-block;
                float: right;
                border: #fff solid 10px;
                border-top-color: pink;
                border-left-color: pink;
                border-bottom-color: pink;
                background: #fff;
            }
        </style>
    </head>
    <body>
        <div class="bm"></div>
    </body>
</html>
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
animhotep
@animhotep
>но как вырезать этот уголок
генерируйте какой нужно
Ответ написан
Комментировать
ghaiklor
@ghaiklor
NodeJS TechLead
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>


.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	
	border-bottom: 5px solid black;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	
	border-top: 20px solid #f00;
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;
	
	border-left: 60px solid green;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	
	border-right:10px solid blue; 
}


JSFiddle
А там уже меняйте цвета под себя.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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