Я пытаюсь сделать hr с двумя цветами на нем, один темно-красный на дне и один оранжевый сверху. Прикреплено изображение, которое дает пример того, что я пытаюсь сделать. Есть ли способ сделать это, используя чистый CSS?HR с двумя цветами
EDIT: Если нет, то есть ли способ, чтобы установить час, чтобы быть изображение? Как png? Что-то, что растянется для разных размеров?
Использование CSS 2 границ, как так:
hr {
border-top: 1px solid gray;
border-bottom: 1px solid white;
}
И чтобы имитировать то, что у вас есть на картинке с текстом, плавающим поверх HR, вы можете сделать что-то вроде this JSFiddle.
поэтому, если я правильно понимаю .. u хочу один час .. с разрешением 1px высота синего и еще 1px высота красного сидения друг на друга. u можете сделать это с чистым css, используя псевдо классы.
hr{
position:relative;
height:1px;
background-color:red;
}
hr:before {
position:absolute;
content : ' ';
left:0;
right:0;
height:1px;
top:-1px;
background-color:blue;
}
Другим решением может быть просто использование градиента CSS. Как так:
hr {
border: 0;
height: 1px;
background: #1e5799;
background: linear-gradient(to right, #1e5799 50%,#7db9e8 50%);
}
Я полностью не знал, что вы можете делать градиенты в таких фонах! повышайте для вас хороший сэр. – noname
Вам не нужно использовать hr только один элемент (Div) с Pseudo-elements, как это:
:root {
background-color: red;
text-align: center
}
:root:hover {
background-color: orange;
}
div {
position: relative;
width: 40px;
display: inline-block;
font-style: italic
}
div:before, div:after{
content: '';
position: absolute;
width: 100px;
height: 1px;
background: black;
top: 50%;
border-radius: 4px;
box-shadow: 0 1px 1px white;
}
div:before{
left: -100px;
}
div:after{
right: -100px;
}<div>or</div>
вы можете использовать элементы Псевдо и box-shadow добавлено в мой ответ –
Вам не нужно использовать псевдоэлементы. – Scott