CODEWITHSUNDEEP
htmlcss
Jeramai
Jeramai

Reputation: 122

How can I replicate this with css?

So I was playing around with some CSS, and wanted to give my titles a specific style. What I was thinking about was something like the image I made here:

Example image

I tried to google for people who wanted the same, but I couldn't really find what I was looking for.

This is what I have so far:

.test {
  position: relative;
  font-size:40px;
  height:40px;
  width:400px;
}
.test>span {
  display: block;
  overflow: hidden;
  position: absolute;
  left: 0;
  width: 100%;
  height: 60%;
  color: #31FF5A;
}
.test>.top{
  z-index:2;
  top:0;
}
.test>.bottom{
  color: black;
  height: 100%;
  z-index:1;
  bottom: 0;
}
<div class="test">
  <span class="top">TEXT</span>
  <span class="bottom">TEXT</span>
</div>

Any one of you who can help me out? Or atleast in the right direction :P

Thanks!

Upvotes: 3

Views: 64

Answers (1)

Neeraj Verma
Neeraj Verma

Reputation: 495

Use border radius property.

.test {
  position: relative;
  font-size:40px;
  height:40px;
  width:400px;
}
.test>span {
    display: block;
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 100%;
    /* height: 60%; */
    color: #31FF5A;
    border-bottom-left-radius: 90%;
}
.test>.top{
  z-index:2;
  top:0;
}
.test>.bottom {
    color: black;
    height: 100%;
    z-index: 1;
    bottom: 0;
    border-bottom-right-radius: 346%;
}
<div class="test">
  <span class="top">TEXT</span>
  <span class="bottom">TEXT</span>
</div>

Upvotes: 1

Related Questions