Как сделать рамку с закруглениями без одного угла, сзади фон меняющийся
-
1Надо блок наложить на него.– user26277923 янв 2018 в 20:44
-
Блок ему не поможет, видишь за ним фон имеет прозрачность. Я бы делал так. Создаешь свой основной блок с position:relative; и padding-left = 50px(к примеру) Для этого блока задаешь границу сверху справа и снизу. Дальше к этому элементу цепляешь псевдоэлемент :before с position:absolute; left:0; top: 0; + border-ы. А уже на элемент :after вешаешь свой знак вопроса. Фон задаешь так как тебе надо. Да и правильные z-index надо ещё раставить– BlackStar199123 янв 2018 в 21:32
2 ответа
Сделал с отрицательными margin'ами legend (возможный вариант)
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial;
background-color: #514d56;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2375bdd8' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.text {
padding: 30px;
}
h3 {
padding: 5px 0;
}
fieldset {
position: relative;
margin: 30px auto;
max-width: 500px;
text-align: justify;
border: 3px solid #fff;
border-radius: 10px;
color: #fff;
}
legend {
font-weight: bold;
margin: -30px -25px;
padding: 25px;
width: 10px;
height: 10px;
border: 3px dashed #fff;
border-radius: 50px;
}
<fieldset>
<legend>?</legend>
<div class="text">
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laboriosam optio sequi rem nemo corporis, ratione facilis veniam dolorum ullam? Velit, nesciunt! Voluptatum repudiandae fugiat non omnis, modi vel illum!</p>
</div>
</fieldset>
Нашел еще один способ через border-image у псевдоэлемента. Возможно кому то будет полезным, хотя скажу сразу я еще новичок в верстке.
Чтобы не мучиться с подгонкой отступов для линий разреза и шириной рамок. Есть неплохой сервис: http://border-image.com
body {
background: url("https://raw.githubusercontent.com/yuriylevchuk/yuriylevchuk.github.io/master/projects-fish/gorstroy/img/faq_bg.jpg") no-repeat center;
background-size: cover;
padding-top: 30px;
}
.some-block {
width: 400px;
margin: 0 auto;
margin-bottom: 50px;
position: relative;
padding-left: 100px;
padding-top: 20px;
padding-bottom: 20px;
}
.some-block::before {
box-sizing: border-box;
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
border-style: solid;
border-width: 98px 71px 57px 89px;
-moz-border-image: url("https://raw.githubusercontent.com/yuriylevchuk/yuriylevchuk.github.io/master/projects-fish/gorstroy/img/faq-border2.png") 81 42 44 74 repeat;
-webkit-border-image: url("https://raw.githubusercontent.com/yuriylevchuk/yuriylevchuk.github.io/master/projects-fish/gorstroy/img/faq-border2.png") 81 42 44 74 repeat;
-o-border-image: url("https://raw.githubusercontent.com/yuriylevchuk/yuriylevchuk.github.io/master/projects-fish/gorstroy/img/faq-border2.png") 81 42 44 74 repeat;
border-image: url('https://raw.githubusercontent.com/yuriylevchuk/yuriylevchuk.github.io/master/projects-fish/gorstroy/img/faq-border2.png') 81 42 44 74 repeat;
}
<body>
<div class="some-block">
<h5>Lorem ipsum dolor sit amet.</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas aliquid ipsa quasi delectus nihil quaerat vitae possimus consequatur, laboriosam, deleniti.</p>
</div>
</body>