Dwukolorowa ramka


(Dewix) #1

Da się zrobić jakoś w CSS efekt jak na grafice nizej ?


(Fizyda) #2

Zależy jak wygląda kod HTML.


(Dewix) #3

Chcę to zrobić w wpisie WordPress.


(Fizyda) #4

A w jaki sposób? Pomijając już dwukolorową ramkę, a ograniczając się do jednego koloru.


(Dewix) #5

Jeden kolor robię wklejając

<div style="border: 1px solid #ff2402; margin: 1.2em 0; padding: 0.5em 1.0em;">
<h3><div style="color: #ff2402; margin-top: -20px;">TYTUŁ</div></h3>
jakis tekst pod tytułem
</div>

Tak jest dla mnie najszybciej :slight_smile:
Wiem, mogę dać

<div id="X">
<h3><div class="Y">TYTUŁ</div></h3>
Jakiś tam tekst
</div>

Ale to kiedy indziej. Myślałem czy nie nakładać na siebie dwóch borderów. Ale wtedy może się rozkraczać na niektórych rozdzielczość.

Jak nie ma prostego sposobu to olać to, myślałem, ze da się to zrobić na szybko bez specjalistycznych kodów czy coś.


(Fizyda) #6

Skoro robisz to w taki sposób to usuń po prostu dolną/górną ramkę dla odpowiedniego div’a:

... style="... border-top: none;" ...

lub

... style="... border-bottom: none;" ...

(Dewix) #7

Ale wtedy boki nie będą “pół na pół” :wink:


(Fizyda) #8

Każdą sekcje robisz w osobnym dive i ukrywasz tylko te krawędzie które ze sobą sąsiadują. Jak chcesz mieć to zrobione w jednym divie możesz bawić się ustawiając jako kolor gradient bez przejścia (z twardym przejściem).