Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Box coming out of browser in css web page

I want a web page which would have an rectangle at the top of the webpage coming from the browser.

I currently have a square created by css, but I am trying to get it to be an square that should come out from the top of the page.
like this
image from the corner

I am using css with wordpress elementor to create the square

This is my css

content:"";
    position:absolute;
    top:0;
    left:0; right:0; 
    z-index:-1;
    height:100%;
    width:100%;
background: linear-gradient(270deg, #0fffc1, #7e0fff);
  background-size:200% 200%;

the result which is coming out currently is this
centered image

Tags:

2

Answers


  1. 0

    Try this:
    you can change the size by changing height and width and also by changing right, you can move it right and left.

    .container:before{
  content:"";
    position:absolute;
    top:50px;
  right:-50px; 
    z-index:-1;
    height:5rem;
    width:10rem;
  background: linear-gradient(270deg, #0fffc1, #7e0fff);
  background-size:200% 200%;

}
    <div class="container"></div>
    Login or Signup to reply.
  2. 0

    We need info about your HTML. I’ll assume that the element you want to position is a direct child of the body element (or a pseudo element that belongs to body). In that case you can use position:absolute since an absolute positioned element looks for the nearest ancestor, if not It’s positioned in the viewport.

    Keep that in mind because you may need position fixed or sticky if the above don’t apply.

    I’m also seeing that you’re using a left:0 and right:0; which means that the positioned element will take all the available space on the left and right (It’s the same as saying width:100%).

    There is more… You’re using a width of 100% and the image that you’ve provided to us doesn’t. Also, don’t set percentages on height. You could use the vh(viewport height) unit in this case.

    Finally, I’ve just created a fiddle that kind of represents what you’re looking for.

    myFiddle: https://jsfiddle.net/lucasdavidferrero/4ak6pe8j/41/

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

Back To Top
Search