Clip-Path Without Clipping Content

clip-path without clipping content

Replace it with a gradient:

div.content {  background:     /*first gradient start at 30px with a height of 40%*/    linear-gradient(to bottom right, transparent 49.5%, red 50%) 0 30.3px/ 100% 40%,     /*second gradient start at bottom with a height of 60% - 30px (the remaining space)*/    linear-gradient(red, red) bottom/100% calc(60% - 30px);  background-repeat: no-repeat;  max-width:700px;}
<div class="content">    Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat doloremque porro modi, aliquam nulla cupiditate voluptatibus similique iusto labore iure voluptatem odit facilis quaerat architecto dolorum reiciendis esse ratione aspernatur? Perferendis    eos aliquid tenetur quia reprehenderit ab quaerat fuga nulla magnam dolore. Eligendi distinctio, et, velit, natus error iste quos animi autem vitae tempora veniam tenetur aspernatur? Consequuntur, qui quis. Quibusdam, dolorum aperiam ex veniam, nemo    itaque assumenda magni earum laboriosam consequuntur porro nam tempora quo odit. Ex animi autem non repellat veniam labore inventore, libero, excepturi ipsam possimus in. Velit iste blanditiis esse quis repellendus. Sit beatae nihil provident, enim    rem totam autem excepturi sequi eaque consectetur tenetur magni maxime blanditiis illo, esse optio voluptatem neque veritatis. Perferendis, voluptatem! Delectus voluptates optio tempora dolorum iure labore, tenetur explicabo! Quis impedit consequatur    maiores, neque inventore nihil quam corporis ducimus excepturi, sequi totam ipsa itaque et ex fugit, libero doloremque labore?  </div>

element is not able to display over clip path background

The problem is that the clip-path is clipping the whole element whereas you want it to clip only the background.

One way round this is to put the background onto a before pseudo element and clip that then the clipping wont affect the actual element.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.signUpBtn:hover {
    color: #FFF;
    background: rgba(138, 147, 153, 0.75);
    border: 2px solid rgba(80, 110, 133, 0.75);
}

.signUpBtn {
    font-family: Raleway-SemiBold;
    font-size: 13px;
    color: rgba(183, 190, 196, 0.75);
    letter-spacing: 1px;
    line-height: 15px;
    border: 2px solid rgba(141, 159, 173, 0.75);
    border-radius: 40px;
    background: transparent;
    transition: all 0.3s ease 0s;
}

.tryUpBtn {
    font-family: Raleway-SemiBold;
    font-size: 13px;
    text-align: center;
    padding-bottom: 0;
    color: rgba(183, 190, 196, 0.75);
    letter-spacing: 1px;
    line-height: 15px;
    border: 2px solid rgba(141, 159, 173, 0.75);
    border-radius: 40px;
    background: rgba(194, 194, 193, 0.308);
    transition: all 0.3s ease 0s;
    margin-top: 70px;
}

.tryUpBtn:hover {
    color: #FFF;
    background: rgba(138, 147, 153, 0.75);
    border: 2px solid rgba(80, 110, 133, 0.75);
}

.gradientSec {
    width: 100%;
    height: auto;
    position: relative;
}
.gradientSec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(57deg, rgb(245, 31, 209), rgb(49, 47, 199));
    clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 94%);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bona+Nova&display=swap" rel="stylesheet">
    <title>HRTech & InsuranceTech</title>
</head>

<body>
    <div class="gradientSec">
       

        <section class="">
            <div class="container">
                <div class="row">
                    <div class="left_side col-6">

                        <button type="button" class="tryUpBtn text-white font-weight-bold btn btn-primary mr-5 pr-3 pl-3"><h5>Try For Free Now!</h5></button>
                        <h1 class="text-capitalize text-white pt-4" style="font-family: 'Bona Nova', serif; letter-spacing: 2px; font-size: 52px;">Set your business up with modern payrolls, benefits, and HR</h1>
                        <div class="input-group ">
                            <input type="text" class="form-control" style="background-color: rgba(235, 215, 240, 0.308); filter: blur(0.3px);
                    -webkit-filter: blur(0.3px);">
                            <div class="input-group-append">
                                <button class="btn btn-primary" style="background-color: rgb(26, 71, 168);" type="button">Get Started</button>
                            </div>
                        </div>



                        <h5 class="text-secondary">Our plans were built to fit your unique needs. Streamline, onboarding, benefits, payroll, PTO, and more with our simple intutive paltform.</h5>


                    </div>


      

                </div>
            </div>


        </section>


    </div>













</body>

</html>

Is there a way to escape clip-path: from child elements? I.E images positioned relative to the clipped background, also get clipped

You need to consider another alternative as clip-path will clip the element and all its content.

Since it's about background, you can rely on gradient like below to create a similar effect.

.content {  height: 300vh;  min-height: 150vh;  background:     /*a triangle shape offested by 50px from the top taking 25% of the height*/    linear-gradient(to bottom right,transparent 49.8%,#25282A 50%) 0 50px/100% 25%,    /*fill the remaining (75% - 50px) with solid color*/    linear-gradient(#25282A,#25282A) bottom/100% calc(75% - 49px);  background-repeat:no-repeat;}
<div class="content">
</div>

How to remove whitespace from clipped elements?

So I've added margin-top -15vh accordingly so that it applies evenly to all divs and remove spacing.

div {
  width: 100%;
  height: 80vh;
  margin-top: -15vh;
}

div:nth-child(even) {
  background-color: rgb(182, 128, 128);
  clip-path: polygon(0% 15%, 100% 0%, 100% 100%, 0% 85%);
/*   transform: translateY(-15%); */
}

div:nth-child(odd) {
  background-color: rgb(109, 127, 177);
  clip-path: polygon(0% 0%, 100% 15%, 100% 85%, 0% 100%);
}

/* selects all odd divs except the first one */
div:not(:first-child):nth-child(odd) {
/*   transform: translateY(-30%); */
}

div:first-child {
  clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);
}
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

svg text with clip-path not clipping properly?

The problem you are having is because any transform that is applied to an element, also gets applied to the clip path attached to it. So your clip path gets transformed twice by the

transform="matrix(1,-0,-0,1,-0,-25.7478256)"

that is on the <text> element and also on the <clipPath> element.

You can fix this in several ways:

  1. Remove the transform from the <text> element and change it's coordinates so it is correctly over the rectangle. Or do the reverse to the rectangle.
  2. Wrap both the rectangle and the text in a group, and apply the clip path to that (as @Mehdi has suggested)
  3. Make a separate <clipPath> without the transform. See example below

<!DOCTYPE html><html>
<head>  <title>Svg clipping issue</title></head>
<body>  <div style="width:500px;height:180px;">    <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="100%"      width="100%">      <defs>        <clipPath id="myClip">          <rect transform="matrix(1,-0,-0,1,-0,-25.7478256)" x="198.1017" y="98.565216" width="65" height="25"></rect>        </clipPath>        <clipPath id="myClip2">          <rect x="198.1017" y="98.565216" width="65" height="25"></rect>        </clipPath>      </defs>      <polygon points="198.1017,98.565216 263.84082,98.565216 263.84082,72.817383 198.1017,72.817383" clip-path="url(#myClip)"        fill="#FF0000" stroke-width="none"></polygon>      <text transform="matrix(1,-0,-0,1,-0,-25.7478256)" clip-path="url(#myClip2)" font-family="Microsoft Sans Serif"        font-size="8.25pt" fill="#000000">        <tspan text-anchor="middle" x="230.6017" y="108.755646">Line 1</tspan>        <tspan text-anchor="middle" x="230.6017" y="121.205841">A very very long line</tspan>      </text>      <rect transform="matrix(1,-0,-0,1,-0,-25.7478256)" x="198" y="98" width="65" height="25" fill="none" stroke="#0000FF"></rect>
    </svg>  </div></body>
</html>

Scale SVG clipping mask without scaling the clipped element

Put the svg after the div and scale the path instead of itself.

.red {
  clip-path: url(#myClip);
  width: 300px;
  height: 300px;
  background-color: red;
  /*background-image: url(./img/project.jpg);*/
  background-size: cover;
  position: absolute;
}

svg path {
  transform-box: fill-box;
  transform-origin: center;
}

.red:hover~svg path {
  transform: scale(1.5);
}
<div href="test.html" class="red">
  <h1>Content Content</h1>
  <h1>Content Content</h1>
  <h1>Content Content</h1>
</div>

<svg height="0" width="0">
            <clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.003)" > 
                <path xmlns="http://www.w3.org/2000/svg" class="cls-2" d="M208.5,3.5c-61-4-125,31-141,94-5,19-5,39,4,57-10-48,21-95,64-116,31-15,66-17,99-7,30,9,59,26,77,53-31-33-75-55-121-51-36,3-73,24-86,59,18-27,47-42,79-44a130,130,0,0,1,104,43c31,36,47,85,35,131,10-65-25-138-93-155-19-5-39-5-57,4,48-10,95,21,116,64,15,31,17,66,7,99-9,30-26,59-53,77,33-31,55-75,51-121-3-36-24-73-59-86,27,18,42,47,44,79a130,130,0,0,1-43,104c-36,31-85,47-131,35,65,10,138-25,155-93,5-19,5-39-4-57,10,48-21,95-64,116-31,15-66,17-99,7-30-9-59-26-77-53,31,33,75,55,121,51,36-3,73-24,86-59-18,27-47,42-79,44a130,130,0,0,1-104-43c-31-36-47-85-35-131-10,65,25,138,93,155,19,5,39,5,57-4-48,10-95-21-116-64-15-31-17-66-7-99,9-30,26-59,53-77-33,31-55,75-51,121,3,36,24,73,59,86-27-18-42-47-44-79a130,130,0,0,1,43-104c36-31,85-47,131-35a66,66,0,0,1-14-1Z"/>
            </clipPath>
        </svg>

How to make CSS clip path only reside on top of div?

If you can't find another solution, it might work.

body {  margin: 0 auto;  background:tomato;}
.container {  width: 320px;  height: 600px;  position:relative;}
.rectangle {  background-image: linear-gradient(-197deg, #E1DFFA 0%, #E1E0FA 34%, #EDFCFE 86%, #EDFCFE 86%);  width: 320px;  height: 600px;  clip-path: url(#path);  position:absolute;  top:0;  left:0;  z-index:2;}
.linear {  background-image: linear-gradient(-197deg, #E1DFFA 0%, #E1E0FA 34%, #EDFCFE 86%, #EDFCFE 86%);  width: 320px;  height: 488px;  position:absolute;  left:0;  z-index:-2;  bottom:0;}
<svg width="321px" height="112px" viewBox="0 0 321 112" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="path">    <path d="M0,54.6239019 C32.8368888,93.6621872 61.3541089,112.45422 85.5516602,111 C151.463201,111.161716 173.963962,18.2383058 321,0 C321.133852,37.3108666 321.133852,74.6442 321,112 L0,112 L0,54.6239019 Z" id="Rectangle" fill="#000000"></path>    </clipPath></svg><div class="container"><div class="rectangle"></div><div class="linear"></div></div>

Show text outside the div with clip-path

Move the background part to pseudo elements:

body {
  background: #333;
  font-family: "SF UI Text", "Avenir", "Helvetica", arial, san-serif;
  color: #888;
}

.ccdLogo {
  background: url("https://crystalcleardesigns.co.uk/img/CCDlogo.svg") no-repeat center / 100%;
  height: 100px;
  width: 150px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.ccdLogo:before {
  content: "Click to view more pens";
  color: transparent;
  font-size: 14px;
  position: absolute;
  top: -2px;
  left: 5px;
  transition: 0.4s;
}

.ccdLogo:hover:before {
  color: #2B7B9B;
  transform: translateY(-10px);
}

.wrapper {
  margin: 5vh auto 0;
}

.pyramid {
  float: left;
  shape-outside: polygon(310px 0px, 130px 405px, 558px 405px);
  padding-right: 60px;
  width: 500px;
  height: 500px;
}

.zone {
  padding: 40px 0;
  margin: 0 auto;
  text-align: center;
  color: black;
  background-blend-mode: darken;
  transition: 0.5s;
  position:relative;
  z-index:0;
}
.zone::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
}

.zone:nth-child(1) {
  width: 25%;
}
.zone:nth-child(1)::before {
  background: rgba(202, 197, 95, 0.7) url("https://pixabay.com/static/uploads/photo/2016/01/05/13/34/laugenbrotchen-1122509_960_720.jpg") center / cover;
  clip-path: url("#part1");
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.zone:nth-child(2) {
  width: 50%;
}
.zone:nth-child(2)::before {
  background: rgba(202, 197, 95, 0.7) url("https://pixabay.com/static/uploads/photo/2016/01/27/14/22/orange-1164504_960_720.jpg") center / cover;
  clip-path: url("#part2");
  clip-path: polygon(25% 0%, 75% 0, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(25% 0%, 75% 0, 100% 100%, 0% 100%);

}

.zone:nth-child(3) {
  width: 75%;
}
.zone:nth-child(3)::before {
  background: rgba(202, 197, 95, 0.7) url("https://pixabay.com/static/uploads/photo/2015/11/21/18/07/apple-juice-1055331_960_720.jpg") center /cover;
  clip-path: url("#part3");
  clip-path: polygon(16.5% 0, 83% 0, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(16.5% 0, 83% 0, 100% 100%, 0% 100%);

}

.zone:nth-child(4) {
  width: 100%;
}
.zone:nth-child(4)::before {
  background: rgba(202, 197, 95, 0.7) url("https://pixabay.com/static/uploads/photo/2016/01/17/04/29/rain-drops-1144448_960_720.jpg") center / cover;
  clip-path: url("#part4");
  clip-path: polygon(12.5% 0, 0%, 87.5% 0, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(12.5% 0, 87.5% 0, 100% 100%, 0% 100%);

}

.zone:hover {
  color: white;
}
.zone:hover::before {
  background-color: rgba(255, 255, 255, 0.3);
}
<div class="wrapper">
  <div class="pyramid">
    <div class="zone">Triangle more text..</div>
    <div class="zone">Trapezoid</div>
    <div class="zone">Trapezoid</div>
    <div class="zone">Trapezoid</div>
  </div>
  <h1 class="text">Oh, the Places You'll Go!</div>
<p class="text">Congratulations! <br> Today is your day.<br> You're off to Great Places!<br> You're off and away!<br>
  <br> You have brains in your head.<br> You have feet in your shoes.<br> You can steer yourself <br> any direction you choose.<br> You're on your own. And you know what you know.<br> And YOU are the guy who'll decide where to go.<br>
  <br> You'll look up and down streets. Look 'em over with care.<br> About some you will say, "I don't choose to go there."<br>

  </div>

  <svg width="0" height="0">
    <defs>
   <clipPath id="part1" clipPathUnits= "objectBoundingBox">
     <polygon points= "0.5 0, 1 1, 0 1"/>
   </clipPath>
   <clipPath id="part2" clipPathUnits= "objectBoundingBox">
     <polygon points= "0.25 0,0.75 0, 1 1, 0 1"/>
   </clipPath>
   <clipPath id="part3" clipPathUnits= "objectBoundingBox">
     <polygon points= "0.165 0,0.83 0, 1 1, 0 1"/>
   </clipPath>
   <clipPath id="part4" clipPathUnits= "objectBoundingBox">
     <polygon points= "0.125 0,0.875 0, 1 1, 0 1"/>
   </clipPath>
     </defs>
</svg>

Related Topics

Merging Selectors from Mixins

Creating an Isoceles Trapezoid Shape

CSS Container Div Not Getting Height

Styling Twitter Bootstrap Buttons

Hide Up & Down Arrow Buttons (Spinner) in Input Number - Firefox 29

How to Make Jquery UI Nav Menu Horizontal

Django CSS Not Updating

Differencebetween Float:Left VS Display:Inline? While Every Element in Browser Goes to Left by Default

Can You Target an Element with CSS Only If 2 Classes Are Present

How to Use Camelcase in CSS Class Names

Image Scaling by CSS: Is There a Webkit Alternative for -Moz-Crisp-Edges

Expanding the Parent Container with 100% Height to Account for Floated Content

IE8 CSS Selector

Less CSS Nesting Classes

Safe Width in Pixels for Printing Web Pages

Downloadable Font on Firefox: Bad Uri or Cross-Site Access Not Allowed

Double Curved Shape

Make Font Awesome Icons in a Circle


Leave a reply



Submit