Breaking News: Grepper is joining You.com. Read the official announcement!

Tree color flag corner in one div line with linear-gradient

Tibor Somogyi answered on July 26, 2023 Popularity 1/10 Helpfulness 1/10

answer Tree color flag corner in one div line with linear-gradient

Tree color flag corner in one div line with linear-gradient

Comment

.threecolorFlagRightMargin{
  background-repeat: no-repeat;
      background-size: contain;
      border-top-right-radius: inherit;
  //threecolor Flag corner
        background: transparent
          linear-gradient(
            90deg,
            #d9000d 0%,
            #d9000d 33%,
            #ffffff 33%,
            #ffffff 49%,
            #ffffff 67%,
            #0b7a38 67%,
            #0b7a38 100%
          )
          0% 0% no-repeat padding-box;
        width: 31px !important;
      }

.threecolorFlagWithCornerBottom{background-repeat: no-repeat;
    background-size: contain;

    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;

    align-items: flex-start;
//threecolor Flag corner
      height: 31px;
      background-image: linear-gradient(
          to bottom,
          #d9000d 0%,
          #d9000d 33%,
          #ffffff 33%,
          #ffffff 49%,
          #ffffff 67%,
          #0b7a38 67%,
          #0b7a38 100%
        ),
        linear-gradient(to right, #0b7a38, #0b7a38 50%, #0b7a38 50%, #0b7a38),
        linear-gradient(to left, #0b7a38, #0b7a38 0.6%, #ffffff 0.6%, #ffffff);
      background-size: 98.75% 100%, 100% 32%, 100% 73%;
      background-size: 98.75% 100%, 100% 32%, 100% 73%;
      background-repeat: no-repeat;
      background-position: left, left bottom, left top;
      }


HTML: 
   <div className="xxx">
      <div className="xxx">
        <div className='xxx'>{children}</div>
        <div className='treecolorFlagRightMargin' />
      </div>
      <div className='treecolorFlagWithCornerBottom' />
    </div>

Popularity 1/10 Helpfulness 1/10 Language css

Source: www.grepper.com

Tags: css line tree

Link to this answer
Share Copy Link

Contributed on Jul 26 2023

Tibor Somogyi

0 Answers Avg Quality 2/10

Tree color flag corner in one div line with linear-gradient

Contents

More Related Answers

Tree color flag corner in one div line with linear-gradient

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.