Маскировка части границы
Можно ли сделать границу div скрытой в определенном месте, как показано на рисунке выше?
Какой-то div маскирует другой div без установки background-color (потому что фон всего сайта представляет собой градиент).
Я не хочу использовать SVG, потому что хочу, чтобы свойства границ были доступны для использования.
Я пытался использовать псевдоэлементы со свойством mask с черным прямоугольником SVG внутри, но граница все еще видна (даже если я поместил маску внутри .card div без ::after.
.card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
padding: 2rem;
border: 1px solid var(--border-color);
border-radius: 2vw;
}
.card::after {
content: "";
position: absolute;
width: 50px;
height: 10px;
top: -5px;
left: 50%;
transform: translateX(-50%);
-webkit-mask: url("../../assets/rect-mask.svg");
mask: url("../../assets/rect-mask.svg");
}
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
61
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Вы можете использовать clip-path:
.box {
--s: 80px; /* size of the cut */
width: 200px;
aspect-ratio: 1;
text-align: center;
position: relative;
margin: 50px;
}
/* your cut border */
.box:before {
content: "";
position: absolute;
inset: 0;
border: 5px solid red;
border-radius: 20px;
clip-path: polygon(0 0,calc(50% - var(--s)/2) 0,calc(50% - var(--s)/2) 50%,calc(50% + var(--s)/2) 50%,calc(50% + var(--s)/2) 0,100% 0,100% 100%,0 100%);
}
/**/
.box span {
display: inline-block;
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
background: blue;
translate: 0 -50%;
}<div class = "box">
<span></span>
</div>Я протестировал обтравочный контур и не смог понять, почему он не работает (все границы исчезли)... но inset: 0 (невероятно) - это именно то, что я искал!!! Большое спасибо!
—
29.06.2024 17:21
вы можете использовать элементы <fieldset> и <legend>..
fieldset {
border : 4px solid red;
border-radius : 2em;
width : 12em;
}
legend {
margin : 0 auto;
padding : 0 1rem; /* make spaces around */
font-size : 2rem;
}<fieldset>
<legend>😃</legend>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,...
</p>
</fieldset>Другие вопросы по теме
Как мне заставить мой CSS работать в Chrome?
Печать и предварительный просмотр веб-страницы не работают должным образом в браузере Microsoft Edge
Способ определения точных свойств стиля, которые в данный момент применяются веб-анимацией (без смешивания со всеми применяемыми в данный момент стилями)
Более разумный способ «сместить» элемент из его контейнера (с фоном)?
Добавить дополнительную задачу поля
Как я могу использовать матрицу из CSS array3d в шейдере WebGL2?
Как создать правило CSS, чтобы отменить другой фон на узле ::selection
Ширина PrimeVue InputNumber превышает ширину его родительского элемента
Ярлык кнопки с надписью ← слева
Html/css flex: предотвращение переполнения элемента окна браузера
Похожие вопросы
Сортировка HTML-таблицы
Как мне заставить мой CSS работать в Chrome?
Печать и предварительный просмотр веб-страницы не работают должным образом в браузере Microsoft Edge
Как загрузить изображение на холст в Gradio с помощью специального HTML и JavaScript?
Очистка данных с веб-сайта со сложной структурой
Более разумный способ «сместить» элемент из его контейнера (с фоном)?
Добавить дополнительную задачу поля
Thymeleaf об операторе th:block
Ярлык кнопки с надписью ← слева
Html/css flex: предотвращение переполнения элемента окна браузера
Какой у вас HTML? Без HTML CSS практически бессмысленен.