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

Можно ли спроектировать то, что показано на изображении, используя только html и css?Как добавить цветные углы к фоновому изображению?

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

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

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

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

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

enter image description here

<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>

источник

2014-05-08 Krish Gowda

Да ... Теперь ступай. –

О, дорогая! вниз проголосовали дважды –

вы можете сделать это с помощью пустого div's –

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

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

источник

2014-05-08 16:10:43

Спасибо большое за ур ответ и спасибо за то, что я был добр ко мне, когда некоторые из них проголосовали за это. Я не знал о псевдоэлементах. так что это было довольно сложно. Я пробовал :: after and :: before и получил выход. проверьте мой код и сообщите, могут ли быть сделаны какие-либо улучшения. –

Вы, кажется, пропустили точку псевэ-элементов. Вы должны иметь возможность выполнить макет, используя ТОЛЬКО '

RULES

'. Конечно, 10 из 10 за попытку, и вы * добились эффекта, однако очень неэффективны и раздуты. –

Я собираюсь оставить решение [здесь] (http://jsfiddle.net/9aACc/) для вас, но я бы предложил дать ему торог попробовать себя, прежде чем смотреть на него, хорошо? Это лучший способ узнать :) –

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

ответ

Смежные вопросы