CODEWITHSUNDEEP
htmlcss
ksno
ksno

Reputation: 487

How to cover piece of border with element over it?

In this example, there is a number hanging on the top of div's border. To make it clear, which part of border I would like to cover with number, I gave border for the number also. For sure, we could give background color for the number, but then body's background image is being hidden. How can we hide piece of border with numbers transparency?

HTML:

<div class="reg-step first-step">
   <span class="step-number">1</span>
   <img src="" alt="Register">
   <h1>Register</h1>
   <div class="steps-separator"></div>
   <p>Lorem ipsum dolor sit amer, consetetur sed iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquayam erat, sed diam vo</p>
</div>

CSS:

body{ 
  background: blue;
  padding-top: 30px;
  background-image: url('https://pbs.twimg.com/profile_images/993504415/css_400x400.png')
}
.reg-step {
    width: 240px;
    height: 325px;
    border: 3px solid white;
    color: white;
    position: relative;
    text-align: center;
    padding: 0px 7px;
}
.reg-step h1 {
    font-size: 14px;
    text-transform: uppercase;
}
.reg-step p {
    font-size: 11px;
}
.reg-step img {
    display: block;
    margin: 10px auto 20px;
}
.reg-step .step-number {
    font-size: 40px;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    top: -23px;
    width: 50px;
    border: 1px solid black;
    background-color: blue;
}
.reg-step .steps-separator {
    width: 90%;
    margin: 20px auto;
    height: 1px;
    background-color: white;
    padding: 0px 7px;
}

Desired result looks like this:

result

Upvotes: 5

Views: 2040

Answers (3)

Theodore K.
Theodore K.

Reputation: 5176

The first idea that came to my mind. Use a pseudoelement like .reg-step:after for the bottom border and border-image in .reg-step for the tricky top (as well as the left and right ones). Check this:

body{ 
  background: blue;
  padding-top: 30px;
  background-image: url('https://pbs.twimg.com/profile_images/993504415/css_400x400.png')
}
.reg-step {
    width: 240px;
    height: 325px;
    color: white;
    position: relative;
    text-align: center;
    padding: 0px 7px;
  
    border: 3px solid;
    border-image:   linear-gradient(to right, white 40%, transparent 40%,  transparent 60%, white 60%) 1;
}
.reg-step:after {
  content: " ";
  position:absolute;
  top:0px; left:0px;
  width:100%;
  height:100%;
  border-bottom: 3px solid white;
}
.reg-step h1 {
    font-size: 14px;
    text-transform: uppercase;
}
.reg-step p {
    font-size: 11px;
}
.reg-step img {
    display: block;
    margin: 10px auto 20px;
}
.reg-step .step-number {
    font-size: 40px;
    display: block;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    top: -23px;
    width: 50px;
    border: 1px solid black;
}
.reg-step .steps-separator {
    width: 90%;
    margin: 20px auto;
    height: 1px;
    background-color: white;
    padding: 0px 7px;
}
<div class="reg-step first-step">
  <span class="step-number">1</span>
  <img src="" alt="Register">
  <h1>Register</h1>
  <div class="steps-separator"></div>
  <p>Lorem ipsum dolor sit amer, consetetur sed iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquayam erat, sed diam vo</p>
</div>

Upvotes: 1

Honza
Honza

Reputation: 703

You can use 

<fieldset>

for that.

check Fiddle https://jsfiddle.net/sepyzund/

html:

<fieldset class="reg-step first-step">
    <legend class="step-number">1</legend>
    <img src="" alt="Register">
    <h1>Register</h1>
    <div class="steps-separator"></div>
    <p>Lorem ipsum dolor sit amer, consetetur sed iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquayam erat, sed diam vo</p>
</fieldset>

css:

body{ 
  background: blue;
  padding-top: 30px;
  background-image: url('https://pbs.twimg.com/profile_images/993504415/css_400x400.png')
}
.reg-step {
    width: 240px;
    height: 325px;
    border: 3px solid white;
    color: white;
    position: relative;
    text-align: center;
    padding: 0px 7px;
}
.reg-step h1 {
    font-size: 14px;
    text-transform: uppercase;
}
.reg-step p {
    font-size: 11px;
}
.reg-step img {
    display: block;
    margin: 10px auto 20px;
}
.reg-step .step-number {
    font-size: 40px;
    display: block;
    margin: 0 auto;
    width: 50px;
    border: 1px solid black;
}
.reg-step .steps-separator {
    width: 90%;
    margin: 20px auto;
    height: 1px;
        background-color: white;
    padding: 0px 7px;
}

Upvotes: 5

user5799177
user5799177

Reputation:

If you want color transparency, you can write as color: rgba(255, 255, 255, 0.5); Here the last parameter alpha is your transparency level. You can set the transparency between 0 and 1.

Upvotes: 1

Related Questions