Чтобы убедиться, что я рекомендую вам внести некоторые изменения:
В правилах .container
удалите overflow: hidden
, так как это, по-видимому, не оказывает визуального влияния на результат (при условии, что свойство heigh
остается auto
- поскольку <div>
значение по умолчанию равно auto).
И вам нужно только ::before
(удалить ::afeter
), но установить -2px
в свойствах top
и left
и установить white
в border-left
цвет вместо прозрачного.
это будет выглядеть примерно так:
.container{
position:relative;
border: 2px solid blue;
background-color: #FFF;
color: #252525;
font-size: 14px;
line-height: 21px;
margin-bottom:20px;
padding:16px;
}
.container:before{
content: "";
position: absolute;
top: -2px;
left: -2px;
border-bottom: 20px solid blue;
border-left: 20px solid white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
Effect if in up no depend seemed. Ecstatic elegance gay but disposed. We me rent been part what. An concluded sportsman offending so provision mr education. Bed uncommonly his discovered for estimating far. Equally he minutes my hastily. Up hung mr we give rest half. Painful so he an comfort is manners.
You vexed shy mirth now noise. Talked him people valley add use her depend letter. Allowance too applauded now way something recommend. Mrs age men and trees jokes fancy. Gay pretended engrossed eagerness continued ten. Admitting day him contained unfeeling attention mrs out.
</div>
</body>
</html>