CODEWITHSUNDEEP
htmlcss
rafulin
rafulin

Reputation: 99

how to make a border like this

I need to make a border like Sample with html and css. I tried to do it with display table, with visibility hidden, but none of it worked!

<div id="border">
  <div id="visible">
    <p id="yellow">Просто выберите, что Вам нужно</p>
  </div>
</div> 

#yellow { color: #dbff12; }
#border { border: 30px solid black; visibility: hidden; }
#visible { position: relative; bottom: 50px; visibility: visible; }

upd: what I mean is that I need a two hollow places around yellow text like on a picture

Upvotes: 3

Views: 239

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105893

You could also use a real title, flex to draw the top borders and the other borders from the container itself....

html {
  min-height: 100%;
  background: linear-gradient(to top left, rgba(0, 0, 0, 0.3), rgba(0, 125, 255, 0.5)), url(http://lorempixel.com/800/600/people/9) top center / cover;
}

[data-fieldset] {
  width: 600px;
  font-size: 20px;
  color: rgba(15, 215, 255, 0.9);
  text-shadow: 1px 1px 1px black;
  margin: 4em auto 1em;
  padding: 1em;
  /* prepare border */
  border: solid 10px rgba(15, 215, 255, 0.4);
  border-top: none;
}

[data-fieldset] h1 {
  font-size: 40px;
  height: 40px;
  line-height: 40px;
  /* reset in position title */
  margin: -35px -20px 1em;
  /* prepare the pseudo behavior */
  display: flex;
  align-items: center;
  color: rgba(255, 215, 16, 0.7);
}


/* draw the tops border via pseudo flex children */

[data-fieldset] h1:before,
[data-fieldset] h1:after {
  content: '';
  flex: 1;
  background: rgba(15, 215, 255, 0.4);
  height: 10px;
}


/* give some space to text */

[data-fieldset] h1:before {
  margin-right: 0.5em;
}

[data-fieldset] h1:after {
  margin-left: 0.5em;
}
<div data-fieldset>
  <h1>My example</h1>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>
</div>

Upvotes: 1

Ehsan
Ehsan

Reputation: 12959

Try This:

fieldset {
    width: 300px;
    border:3px solid skyblue;
}

legend {
    color: orange;
    padding: 0 10px;
}

span {
    border-bottom: 1px dashed;
    margin-right: 50px;
}
<fieldset>
  <legend>Просто выберите, что Вам нужно</legend>
  <span>Other Text</span>
  <span>Other Text</span>
</fieldset>

Upvotes: 1

dfsq
dfsq

Reputation: 193261

In this case it's convenient to use fieldset element with associated legend:

fieldset {
  border: 4px green solid;
}

fieldset legend {
  padding: 0 10px;
}
<fieldset>
  <legend>Просто выберите, что вам нужно</legend>
  <div>
    Оформить тендер и т.п.
  </div>
</fieldset>

Upvotes: 1

Related Questions