Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.4k views
in Others[杂七杂八] by (100 points)

i am to build a page by dividing the page into two then one for equiletral right triangle with background image

#one {height:inherit;}
#oney{height: 100%;}
.corner {
    width:100%;
    /* background-image: url(../img/operator.png); */
    background-color: var(--dark);
    background-repeat: no-repeat;
    background-size: cover;
    /* border-bottom-right-radius:10%; */
    border-bottom-left-radius:10%;
    /* margin-top: -10px; */
    /* position: absolute; */
 
    overflow:hidden;
    position: relative;
    border: 1px solid var(--dark);
}
 
.cornery {
    width:50%;
    /* background-image: url(../img/operator.png); */
    background-color: var(--dark);
    background-repeat: no-repeat;
    background-size: cover;
    /* border-bottom-right-radius:10%; */
    border-bottom-left-radius:10%;
    /* margin-top: -10px; */
    /* position: absolute; */
 
    /* overflow:hidden; */
    position: relative;
    border: 1px solid var(--dark);
}

.cornery:after, .cornery:before {
    content: "";
    position: absolute;
    left: 100%;
    width: 150px;
    height: 50%;
   
}
.cornery:before {
    top: 0px;
    background: linear-gradient(to top right, var(--dark) 50%, transparent 51%);
}
.cornery:after {
    bottom: 0px;
    background: linear-gradient(to bottom right, var(--dark) 50%, transparent 51%);
}

.corner:after, .corner:before {
    content: "";
    position: absolute;
    left: 100%;
    width: 150px;
    height: 50%;
   
}
.corner:before {
    top: 0px;
    background: linear-gradient(to top right, var(--dark) 50%, transparent 51%);
}
.corner:after {
    bottom: 0px;
    background: linear-gradient(to bottom right, var(--dark) 50%, transparent 51%);
}


 
.content_index{
    /* background-color: red; */
    width: 38%;
    height: inherit;
    /* border: 1px solid var(--dark); */
    border-bottom-left-radius:10%;
 
}
 <div class="cornery" id="oney">
            <div class="corner" id="one">.
             
                <figure class="corner2" ><span class="slide_info">Welcome</span></figure>
                <figure class="corner3" >.</figure>
                <figure class="corner4" >.</figure>
                <figure class="corner5" >.</figure>
         
            </div>
        </div>
Welcome To Ask or Share your Answers For Others

Please log in or register to answer this question.

Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...