css Question posted in
Some basic documentation can be found here.

Css – Need to do waves div borders

I have a <video> on web page.

And I have a some text. I need to do text upper video with waves borders.

I try to make invisible squares with opacity 0. But with video frame I can’t do 3 layers.

Example:
enter image description here

Like this:

.antispammer{
    background-color: rgb(0, 0, 0);
    height: 10px;
    width: 10px;
    border-radius: 0 0 0 7px;
  
}

.spammer{
    background-color: rgb(255, 255, 255);
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Okay, i will decompose question.

    I have 2 divs. First div's width 100px second div's width 200px

    How i a can to merge their borders in one curve line?

    Example:

    HTML

<div class="first-block">Some text</div>
<div class="second-block">More some text</div>


CSS

.first-block{
    width:100px;
}

.second-block{
    width:200px;
}

  2. 0

    Not exactly as image but this might help.
    Feel free to modify.

    Note : Run in full screen

    body {
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif;
  background-color: black;
}

.div1 {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.div2 {
  position: relative;
  display: flex;
  justify-content: center
}

.div2 h2 {
  margin: 0;
  display: inline;
  position: absolute;
  top: -20px;
  left: 40px;
  color: white;
  font-size: 40px;
    width: 300px;
  line-height: 60px
}

.div2 span{
  background-color: black;
  padding: 15px;
  letter-spacing: 2px;
}
    <div class="div1">
  <section class="div2">
    <h2>
      <span>A web design and branding agency</span>
    </h2>
    <video src="https://videos.pexels.com/video-files/20071783/20071783-sd_640_360_30fps.mp4" autoplay controls>
    </video>
  </section>
</div>

    CodePen Link

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search