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

Question

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

0

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

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

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

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

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

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

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

Krish Gowda 08 май 2014, в 18:14

Источник

4

Да ... теперь иди.
Paulie_D 08 май 2014, в 16:08
0

о, Боже! проголосовал дважды
Krish Gowda 08 май 2014, в 16:10
0

Вы можете сделать это с помощью пустых div
Taras Lukavyi 08 май 2014, в 16:10
1

Вы были отклонены, потому что вы не показывали существующий код, подобный коду для предложенного вами решения. Хорошо, по крайней мере, вы предложили что-то, так что это не вопрос "сделай это для меня как можно скорее"; но это не кажется достаточным (и не является)
FelipeAls 08 май 2014, в 16:17
0

Какие идеи у вас есть, чтобы начать?
Lynn Crumbling 08 май 2014, в 16:50
1

+1 за добавление кода, который вы пробовали на свой вопрос.
Lynn Crumbling 09 май 2014, в 16:56

Показать ещё 4 комментария

Теги:

html

css

css3

layout

1 ответ

Ещё вопросы

Вы можете сделать это с помощью пустых div
Вы были отклонены, потому что вы не показывали существующий код, подобный коду для предложенного вами решения. Хорошо, по крайней мере, вы предложили что-то, так что это не вопрос "сделай это для меня как можно скорее"; но это не кажется достаточным (и не является)
Какие идеи у вас есть, чтобы начать?
+1 за добавление кода, который вы пробовали на свой вопрос.

Niet the Dark Absol · Accepted Answer · 2014-05-08T13-59-00.000Z

3

Лучший ответ

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

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

Niet the Dark Absol 08 май 2014, в 13:59

0

Большое спасибо за ваш ответ, и спасибо, что были добры ко мне, когда некоторые из них проголосовали за это. я не знал о псевдоэлементах. так было сложно. Я попытался :: после и :: до и получил вывод. проверьте мой код и скажите, можно ли внести какие-либо улучшения.
Krish Gowda 08 май 2014, в 18:26
0

Похоже, вы упустили смысл псевдоэлементов. Вы должны иметь возможность выполнить макет, используя ТОЛЬКО <div id="rules">RULES</div> . Конечно, 10 из 10 за то, и ты добиться эффекта, однако это очень неэффективно и раздутой.
Niet the Dark Absol 08 май 2014, в 19:03
1

Я собираюсь оставить решение здесь для вас, но я бы предложил попробовать его перед тем, как посмотреть на него, хорошо? Это лучший способ учиться :)
Niet the Dark Absol 08 май 2014, в 19:08
1

@KrishGowda Я немного волнуюсь, что ты думаешь, что ты был связан с тем, что ты не был "добрым". На StackOverflow это определенно две разные вещи. Я видел, как люди оставляли некоторые очень неприятные комментарии (которые очень быстро удалялись), и я видел, как вопросы обсуждались много раз практически без комментариев. Понижение означает, что «этот вопрос не требует каких-либо исследований; он неясен или бесполезен». Это не значит, что люди злые; в вашем случае это просто означает, что тот, кто задал вопрос, не предоставил достаточно информации. Позже вы отредактировали свой вопрос и включили CSS.
Lynn Crumbling 09 май 2014, в 16:49
1

@KrishGowda Я готов поспорить, что если бы вы с самого начала поставили вопрос под сомнение, вас бы вообще не понизили. На самом деле, я, скорее всего, проголосовал бы за этот вопрос (обратите внимание, что я не проголосовал против вас ... Я просто вообще не голосовал). Последний комментарий: я искренне надеюсь, что вы вернетесь в StackOverflow, потому что вы Доказано, что вы МОЖЕТЕ написать хорошие вопросы, при условии, что вы думаете, «что еще люди хотят знать?». (пример кода, точное сообщение об ошибке, ожидаемое и фактическое поведение). Включите их в свой вопрос. Удачи в будущем.
Lynn Crumbling 09 май 2014, в 16:53
0

@LynnCrumbling Хорошая мысль. На самом деле, я проголосовал против вас и хотел бы сделать это дважды, потому что вы взяли то, что я вам дал, и попробовали.
Niet the Dark Absol 09 май 2014, в 16:54
0

@NiettheDarkAbsol +1 Почти забыл тебя .. хороший ответ!
Lynn Crumbling 09 май 2014, в 16:56
0

@LynnCrumbling Это не правда ... я только имел в виду, что Niet был достаточно любезен, чтобы ответить, хотя мой вопрос не соответствовал стандартам stackoverflow ... у него было 2 варианта ... практически, я кое-что узнал от Niet и других ... я не был против акта подавления, но я оценил действия Ниета выше этого ...
Krish Gowda 13 май 2014, в 07:30
0

@LynnCrumbling, и мне было очень приятно написать эти слова мне. благодарю вас..
Krish Gowda 13 май 2014, в 07:39

Показать ещё 7 комментариев