Как добавить цветные углы на фоновое изображение?

0

Можно ли спроектировать то, что показано на изображении, используя только html и css?

Если да, то как?

Если нет, какова альтернатива?

создавая прозрачное изображение с двумя цветными углами и применяя его как фоновое изображение к div, которое содержит текст, на мой взгляд. Есть ли лучший способ сделать это?

Мне нравится делать это с помощью html и css только потому, что тогда он становится гибким, чем использование изображения.

Я добавил код, который я попробовал. пожалуйста, проверьте. получил желаемый результат. но я хотел бы знать, можно ли сделать какие-либо улучшения?

Изображение 174551

<style>
#rules
{
     width:200px;
     height:100px;
}
#rules .top, #rules .bottom
{
    width:200px;
    height:10px;
    float:left;
}
#rules .top::before
{
    content:"";
    display:inline-block;
    width:40px;
    height:10px;
    background-color:#000;
}
#rules .left, #rules .right
{
    width:200px;
    float:left;
    height:30px;
}

#rules .left::before
{
    content:"";
    display:inline-block;
    width:10px;
    height:30px;
    background-color:#000;
}
.center
{
    width:200px;
    height:20px;
    float:left;
    text-align:center;
}
#rules .right::after
{
    content:"";
    display:block;
    width:10px;
    height:30px;
    background-color:#000;
    float:right;
}
#rules .bottom::after
{
    content:"";
    display:inline-block;
    width:40px;
    height:10px;
    background-color:#000;
    float:right;
}
</style>
</head>

<body>
<div id="rules">
    <div class="top"></div>
    <div class="left"></div> 
    <div class="center">RULES</div> 
    <div class="right"></div>
    <div class="bottom"></div>         
</div>
</body>
  • 4
    Да ... теперь иди.
  • 0
    о, Боже! проголосовал дважды
Показать ещё 4 комментария
Теги:
layout

1 ответ

3
Лучший ответ

Лично я достиг этого эффекта, используя псевдоэлементы. Используйте ::before и ::after для каждого из углов и используйте их левую и верхнюю (соответственно правую и нижнюю) границы в желаемом цвете. Затем вы можете установить их ширину и высоту. Не забудьте установить "скрытые" границы в нулевую ширину, чтобы вы не наклонены.

Если у вас возникла проблема с реализацией этого, вы можете вернуться с кодом, который вы пробовали :)

  • 0
    Большое спасибо за ваш ответ, и спасибо, что были добры ко мне, когда некоторые из них проголосовали за это. я не знал о псевдоэлементах. так было сложно. Я попытался :: после и :: до и получил вывод. проверьте мой код и скажите, можно ли внести какие-либо улучшения.
  • 0
    Похоже, вы упустили смысл псевдоэлементов. Вы должны иметь возможность выполнить макет, используя ТОЛЬКО <div id="rules">RULES</div> . Конечно, 10 из 10 за то, и ты добиться эффекта, однако это очень неэффективно и раздутой.
Показать ещё 7 комментариев
Сообщество Overcoder
Наверх
Меню