How can I place text on an elements border with transparency on the areas where text touches border?

Question

See the image above. I'd like to have the text on top of the border. How can I achieve this using html/css? Are there other alternatives

.wrapper {
  width: 100%;
  background: black;
  border: 4px solid purple;
  padding: 1rem;
  color: #FFF;
}

.wrapper p {
  text-align: center;
}

h1 {
  text-align: center;
}

a {
  display: table;
  margin: 0 auto;
  color: #FFF;
}

<div class="wrapper">
  <h1>
    Lorem ipsum dolor sit amet
  </h1>
  <p>
    Lorem ipsum
  </p>
  <a href="">Button</a>
</div>

from the duplicate: https://stackoverflow.com/a/57279326/8620333 — Temani Afif, Jul 12 '20 at 15:30
@TemaniAfif Please look at the answer provided and unlock this question because it may be useful to someone else. The question I've asked is sufficiently different because I needed transparency where the text appears. I'd already seen the other question you claim is a duplicate and the answer provided herein is not the same. — andromeda, Jul 12 '20 at 17:26
did you see the link in my previous comment? it shows a solution with transparency exactly the same as the below one which confirm the duplicate — Temani Afif, Jul 12 '20 at 19:17

jbutler483 · Accepted Answer · 2020-07-12T14:27:05.323

You can achieve this using the pseudo elements of the h1 tag. In short, you have a wrapper div that creates the border left, right and bottom and still then use the pseudo elements of h1 to make the top border.

.wrapper {
  height: 100px;
  margin: 0 auto;
  width: 80%;
  margin-top: 30px;
  box-sizing: border-box;
  border: 5px solid tomato;
  border-top: none;
  position: relative;
}

.wrapper h1 {
  position: absolute;
  top: -41px;
  display: block;
  text-align: center;
  width: 100%;
  overflow: hidden;
  font-size: 2em;
}

h1:before,
h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin-right:1em;
  margin-left:-50%;
  vertical-align: middle;
  border-bottom: 5px solid tomato;
}

h1:after {
  margin-right:-50%;
  margin-left:1em;
}

/*Demo Only*/

body{
background:url("https://i.imgur.com/fL3tbdj_d.webp?maxwidth=728&fidelity=grand") no-repeat;

background-size:100% 100%;

<div class="wrapper">
  <h1>
    TITLE HERE
  </h1>
</div>

<div class="wrapper">
  <h1>
    LONGER TITLE HERE
  </h1>
</div>

score 0 · Answer 2 · answered Jul 12 '20 at 14:15

0

You can try to change the position of your h1 to relative, and move It

.wrapper p {
  position : relative;
  bottom : 30%;
 }

the bottom one means that It will move 30% to the top

answered Jul 12 '20 at 14:15

Mohamed Ouhami

3
2

score 0 · Answer 3 · answered Jul 12 '20 at 14:19

0

Here is simple example may be it can give you an idea I found hard to edit your own codes so that's why I made this simple code

body {
  background-color: lightgreen;
}

.cont {
  height: 120px;
  width: 400px;
  border: 2px solid black;
  position: relative;
  margin: 40px
}

.cont:before {
  content: "My Header title";
  width: 180px;
  /* border: 1px solid; */
  position: absolute;
  text-align: center;
  top: -10px;
  background-color: lightgreen;
  left: 50%;
  transform: translateX(-50%);
}

<div class="cont"></div>

answered Jul 12 '20 at 14:19

Umutambyi Gad

4,082
3
18
39

2

This would be perfect only looks like OP wants to have an image background. – jbutler483 Jul 12 '20 at 14:21
@jbutler483 Precisely, this would work but I wanted the transparency so I could still have visibility on the background image. – andromeda Jul 12 '20 at 14:53

How can I place text on an elements border with transparency on the areas where text touches border?

3 Answers3