Подскажите как элегантно решить такую задачу с рамкой на css
3 ответа
*{
box-sizing:border-box;
}
body{
margin:0;
background:linear-gradient(to right, #acd,#cda);
}
.block{
width:300px;
margin:20px auto;
position:relative;
border-left:4px solid red;
border-right:4px solid red;
}
.inner{
height:150px;
padding:10px;
}
.block:before,
.block:after,
.inner:before,
.inner:after{
content:'';
display:block;
border-radius:20px;
position:absolute;
height:4px;
background-color:red;
}
.block:before{
top:0;
left:-2px;
width:calc(60% - 30px);
}
.block:after{
top:0;
right:-2px;
width:calc(40% - 30px);
}
.inner:before{
bottom:0;
left:-2px;
width:calc(40% - 30px);
}
.inner:after{
bottom:0;
right:-2px;
width:calc(60% - 30px);
}
<div class="block">
<div class="inner">
Some Text
</div>
</div>
Разобрался) Решение с svg))
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url('https://images.pexels.com/photos/290660/pexels-photo-290660.jpeg?auto=compress&cs=tinysrgb&h=350') no-repeat center /cover;
font-size: 20px;
}
.some-block {
padding: 20px;
position: relative;
margin: 50px auto;
width: 300px;
height: 300px;
color: #fff;
text-align: center;
}
.border {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
rect {
width: 100%;
height: 100%;
fill: transparent;
stroke: yellow;
stroke-width: 10px;
stroke-dashoffset: 100%;
stroke-dasharray: 150% 35%;
}
<div class="some-block">
<svg class="border">
<rect></rect>
</svg>
<h1>Lorem ipsum dolor sit amet.</h1>
</div>
body {
background: #acd;
}
.block{
background: #acd;
padding: 10px;
border: 3px solid #f00;
position: relative;
width: 200px;
height: 80px;
margin: 20px;
}
.block:before, .block:after{
content: ' ';
position: absolute;
width: 30%;
height: 3px;
background: #acd;
}
.block:before{
top: -3px;
right: 10%;
}
.block:after{
bottom: -3px;
left: 10%;
}
<div class="block">
Здесь ваш текст
</div>
-
-
C фоном проблем не вижу, в вот с закругленные края что то проглазел, просто сижу далеко от монитора, их реально не видно, но тоже все решаемо псевдоэлементами, это я просто набросок сделал каким образом это делается, у вас неплохой вариант, только calc не очень совместимая штука, а так все супер)– Bert7 июл 2018 в 9:33