Последние записи

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

14th
Апр

CSS. Уголки на блоке.

Posted by maloy under HTML

alextrof94

Возможно ли как то сделать такие уголки (прикрепил) на блоке при помощи чистого CSS?
В данный момент это организуется при помощи 2х изображений.

Код:


.box {
	position: relative;
	margin: 30px auto;
	padding: 10px;
	background-color: #fff;
	min-height: 50px;
	min-width: 50px;
}
.box:before {  
    position: absolute;  
    content: url("http://mysite.ru/images/box_before.png");  
    float: right;  
    left: 0;   
    top: 0;  
	display: block;
	width: 50px;
	height: 50px;
}  
.box:after {  
    position: absolute;  
    content: url("http://mysite.ru/images/box_after.png");  
    float: right;  
    bottom: 0;   
    right: 0;  
	display: block;
	width: 50px;
	height: 50px;
}

Изображения

Naive

Код:


<div>    <textarea></textarea></div>

и еще:


div {

position: relative;

display: inline-block;

padding: 50px;}
div:before,

div:after {

position: absolute;

content: '';

width: 40px;

height: 40px;

border: #ccc solid 5px;}
div:before {

border-right: 0 none;

border-bottom: 0 none;

top: 0;

left: 0;}
div:after {

border-left: 0 none;

border-top: 0 none;

right: 0;

bottom: 0;}