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

Create an arc in email using css and html

My designer created this design with an arc. I have covered it in light and dark mode by using a .png. However it looks horrible in forced dark mode.

This is what I am trying to achieve. I am stumped hopefully someone can helpenter image description here This is what I see now actually any place I look besides my iPad the arc is white
enter image description here

I would like to achieve this with code instead of using a png so i have more control over the design

Tags:

2

Answers


  1. 0

    Yes you can achieve that using CSS background gradient radial.

    Add the following css to your page

    body {
 height:100vh;
 margin:0;
 background-image:radial-gradient
(at top center,#121212 50%,
#121212 50%, transparent 67.5%);
 background-size:100% 40%;
 background-repeat:no-repeat;
}

    And adjust it to your needs

    I created a Codepen so You can see it working here

    https://codepen.io/Familia-Santiaborg/pen/poQpwRm

    Remember it is just an example and you need to adjust the colors with the colors of your choice

    You can also adjust the form using the % values

    Login or Signup to reply.
  2. 0

    To achieve this, try this code.

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

body {
  background: #202125;
}

.button-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  &:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 300px;
    left: 0;
    right: 0;
    top: -150px;
    background: #292929;
    border-radius: 100%;
    transform: scale(1.1);
  }
}

.button {
  background: #fecc45;
  z-index: 1;
  padding: 12px 50px;
  border-radius: 5px;
  cursor: pointer;
}
    <div class="button-container">
  <div class="button">Learn More</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search