Html Question posted in
Some basic documentation can be found here.

Html – CSS only curved or warped background box

I’m trying to achieve quite a simple effect but struggling to get something that looks good.
It needs to be accessible HTML so a CSS only solution is desired. Any background color and any page color.

So far I’ve used radial gradient but it’s not smooth.
Border-radius doesn’t give the right arc, it needs to be more 3D.

Here’s my prototype https://jsfiddle.net/nsr3bpfc/3/ using this CSS

background: radial-gradient(500rem at 3rem -248rem, transparent 50%, brown 50%);

Example effect

Tags:

2

Answers


  1. 0

    You could possibly add box-shaddow to give it more depth.

    Also what is the actual effect you are looking for?

    body {
  background: linear-gradient(45deg, #07edd0, #acf932) 100% 100% fixed;
}

.box1 {
  width: 30em;
  height: 10em;
  background: brown;
  position: relative;
  color: white;
  padding: 2rem;
  margin: 4rem;
  box-shadow: 15px 0 15px -5px rgba(0, 0, 0, 0.7); /* Enhanced shadow effect */
  border-radius: 10px 0px 0px 10px; /* Rounded corners */
}

.box1::before,
.box1::after {
  content: "";
  height: 2rem;
  position: absolute;
  left: 0;
  width: 100%;
}

.box1::before {
    background: radial-gradient(500rem at 3rem -248rem, transparent 50%, brown 50%);
    top: -2rem;
    border-radius: 10px 10px 0px 10px;
}

.box1::after {
  background: radial-gradient(500rem at 3rem 250rem, transparent 50%, brown 50%);
  bottom: -2rem;
  border-radius: 10px 0px 10px 10px;
}

h1, p {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Optional: shadow for text */
}
    <body>
    <div class="box1">
        <h1>Hello</h1>
      <p>
      Some content
      </p>
    </div>
</body>
    Login or Signup to reply.
  2. 0

    You can use a box-shadow for pseudo-elements:

    body {
  background: linear-gradient(45deg, #07edd0, #acf932) 100% 100% fixed;
}

.box1 {
  --width: 30em;
  --shadow-height: 2rem;
  width: var(--width);
  min-height: 10em;
  background: brown;
  position: relative;
  color: white;
  padding: 2rem;
  margin: calc(2 * var(--shadow-height)) 1em;
}

.shadow {
  position: absolute;
  width: 100%;
  height: var(--shadow-height);
  overflow: hidden;
  right: 0;

  &:before {
    content: '';
    position: absolute;
    right: calc(-.1 * var(--shadow-height));
    height: calc(2 * var(--shadow-height));
    width: calc(2.1 * var(--width));
    box-shadow: 0 0 0 calc(2 * var(--shadow-height)) brown;
  }
}

.shadow-top {
  bottom: 100%;
  &:before {
    bottom: 0;
    border-bottom-right-radius: 50%;
  }
}

.shadow-bottom {
  top: 100%;
  &:before {
    border-top-right-radius: 50%;
  }
}
    <div class="box1">
<div class="shadow shadow-top"></div>
<div class="shadow shadow-bottom"></div>
    <h1>Hello</h1>
  <p>
  Some content
  </p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search