Сглаживание границы при использовании CSS с радиусом границы

Я пытаюсь использовать CSS и HTML для рисования изогнутой формы. Подобно изображению ниже, но избавьтесь от этих красных обведенных областей и сделайте линию плавной. Большую часть CSS я создал сам, и любые советы будут оценены, хотя этот код будет использоваться только на статической HTML-странице, поэтому не используйте JS. Я ищу решение, которое можно сделать только с помощью CSS и HTML.

enter image description here

CSS и HTML за изображением:

:root {
    --border: 10px;
    --border-radius: 30px;
    --border-color: #000000;
    --margin: calc((var(--border)/2) * -1);
}

#container {
    margin: var(--border);
}

.row {
    font-size: 0;
}

.column {
    width: 32px;
    height: 24px;
    display: inline-block;
    border: var(--border) solid transparent;
    margin: var(--margin);
}

.top {
    border-top: var(--border) solid var(--border-color);
    margin-top: var(--margin)
}

.right {
    border-right: var(--border) solid var(--border-color);
    margin-right: var(--margin);
}

.bottom {
    border-bottom: var(--border) solid var(--border-color);
    margin-bottom: var(--margin);
}

.left {
    border-left: var(--border) solid var(--border-color);
    margin-left: var(--margin);
}

.top-left {
    border-top: var(--border) solid var(--border-color);
    border-left: var(--border) solid var(--border-color);
    border-radius: var(--border-radius) 0 0 0;
    margin-top: var(--margin);
    margin-left: var(--margin);
}

.top-right {
    border-top: var(--border) solid var(--border-color);
    border-right: var(--border) solid var(--border-color);
    border-radius: 0 var(--border-radius) 0 0;
    margin-top: var(--margin);
    margin-right: var(--margin);
}

.bottom-left {
    border-bottom: var(--border) solid var(--border-color);
    border-left: var(--border) solid var(--border-color);
    border-radius: 0 0 0 var(--border-radius);
    margin-bottom: var(--margin);
    margin-left: var(--margin);
}

.bottom-right {
    border-bottom: var(--border) solid var(--border-color);
    border-right: var(--border) solid var(--border-color);
    border-radius: 0 0 var(--border-radius) 0;
    margin-bottom: var(--margin);
    margin-right: var(--margin);
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Design</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="container">
            <div class="frame">
                <div class="row">
                    <div class="column top-left"></div>
                    <div class="column top"></div>
                    <div class="column top-right"></div>
                    <div class="column"></div>
                    <div class="column"></div>
                    <div class="column top-left"></div>
                    <div class="column top-right"></div>
                </div>
                <div class="row">
                    <div class="column left"></div>
                    <div class="column"></div>
                    <div class="column"></div>
                    <div class="column bottom-left"></div>
                    <div class="column bottom-right"></div>
                    <div class="column"></div>
                    <div class="column right"></div>
                </div>
                <div class="row">
                    <div class="column bottom-left"></div>
                    <div class="column"></div>
                    <div class="column"></div>
                    <div class="column"></div>
                    <div class="column"></div>
                    <div class="column"></div>
                    <div class="column bottom-right"></div>
                </div>
                <div class="row">
                    <div class="column"></div>
                    <div class="column top"></div>
                    <div class="column top"></div>
                    <div class="column top"></div>
                    <div class="column top-right"></div>
                    <div class="column top-left"></div>
                    <div class="column right top-right"></div>
                </div>
                <div class="row">
                    <div class="column"></div>
                    <div class="column"></div>
                    <div class="column"></div>
                    <div class="column"></div>
                    <div class="column bottom-right"></div>
                    <div class="column"></div>
                    <div class="column right"></div>
                </div>
                <div class="row">
                    <div class="column top-left"></div>
                    <div class="column top"></div>
                    <div class="column top"></div>
                    <div class="column top"></div>
                    <div class="column"></div>
                    <div class="column"></div>
                    <div class="column right"></div>
                </div>
                <div class="row">
                    <div class="column bottom-left"></div>
                    <div class="column bottom"></div>
                    <div class="column bottom"></div>
                    <div class="column bottom"></div>
                    <div class="column bottom"></div>
                    <div class="column bottom"></div>
                    <div class="column bottom-right"></div>
                </div>
            </div>
        </div>
    </body>
</html>

Возможно ли что-то подобное сделать с помощью CSS? Если да, то как?

Вы можете изучить использование псевдоэлементов до или после, чтобы «закрыть пробелы»; хотя это не помогает вещам становиться менее сложными! В качестве полной альтернативы вы рассматривали SVG?

A Haworth 23.04.2022 14:27

@AHaworth, я ищу решение для CSS, это не то, что я хотел бы рисовать, а использовать CSS для создания простой изогнутой линии.

al1en 23.04.2022 14:49
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
2
2
31
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Может быть, вы можете использовать box-shadow вместо border

например: box-shadow: 10px 10px 0 #000 inset; для .top-left класса

Это выглядит многообещающе, просто нуждается в настройке, я считаю. Я попробую варианты и дам вам знать, как это происходит.

al1en 23.04.2022 15:43

благодаря вашему ответу я смог добиться того, чего хотел. Рабочая рабочий пример здесь jsfiddle.net/al1en/akrv21cf/16

al1en 23.04.2022 17:42

Другие вопросы по теме