Photoshop Question posted in
The official user guide can be found here.

Playing with CSS shapes: How to make a custom ICON using pure HTML and CSS – Photoshop

Currently, I am playing with HTML and CSS and I wanted to make a icon from this image enter image description here

the image is somewhat like that. I tried adding different shapes of ovals and circles inside the bigger circle but it did not work. For the shaded part, I used a box-shadow in styling it. There are already too many divs in my sample icon. I just want to have it simple and readable.

Here is my HTML structure:

<link rel="stylesheet" href="style.css">

<div class="cont">
    <div class="icon2">
        <div class="inner-circle"></div>
    </div>
</div>

and here is my CSS:

.cont {
    width: 190px;
    height: 190px;
    padding: 20px;
 }
 .icon2 {
    position: relative;
    border: 2px solid #353332;
    width: 187px;
    height: 184px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: inset 20px 35px #1CAEE3;
    transform: rotate(177deg);
  }
  .inner-circle {
    border: 7px solid #353332;
    width: 120px;
    height: 183px;
    background-color: #fff;
    border-radius: 50% 50% 50% 49% / 60% 52% 40% 40%;
    transform: rotate(240deg);
    display: block;
    margin: 6px 0px 4px 35px;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
   }

Can you explain me this and how can I come up with a solution to my problem? I’m stuck for hours and I just wanted to try it with pure HTML and CSS and not using photoshop.

Tags:

3

Answers


  1. 0

    You can easily do this with one element and radial-gradient. Simply adjust the percentage used inside the gradient to control the shape:

    .box {
  width:150px;
  height:150px;
  border-radius:50%;
  border:4px solid;
  background:
    radial-gradient(circle at top left,transparent 59.4%,black 60% calc(60% + 4px),orange calc(60% + 5px));
}
    <div class="box"></div>
    Login or Signup to reply.
  2. 0

    You can also use box-shadow 😉

    https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

    The box-shadow CSS property adds shadow effects around an element’s frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.

    demo aside your image:

    div {
  border: solid 6px;
  display: inline-flex;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: inset -50px -70px 1px -30px rgb(255, 127, 39), inset -56px -77px 1px -33px;
}

code {
  font-size: 30px;
  color: green;
  margin: auto;
  font-weight: bold;
}

div,
img {
  vertical-align: middle;
}
    <img src="https://i.stack.imgur.com/HRpQY.png">
<div><code>box-shadow</code></div>

    another example :

    div {
float:left;
  height: 180px;
  width: 180px;
  margin: 1em;
  box-sizing: border-box;
  padding: 25px;
  background: #F4E5D9;
  box-shadow: inset -40px -40px 3px -20px #C5824D, inset 40px 40px 3px -20px #EABD9A, inset 0 0 2px 30px #AD6026, inset 0 0 0px 32px #705642, inset 0 -55px 3px 10px #705B4B, inset 0 55px 3px 10px #705B4B, 0 0 3px 2px #705B4B, 0 0 3px 4px #665447, 0 0 3px 7px #3F332A, 0 0 3px 9px #705642, 88px 90px 1px -86px gray, 87px 85px 2px -82px #F2C232, 85px 95px 2px -82px #A30700, 92px 92px 2px -82px #C5824D, 88px 90px 10px -70px white;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;text-align:center;
}
div + div {border-radius:4em /50%;
    <div>
  <p>inset shadow </p>
  <p>border-radius </p>
  <p>decreased shadow </p>
</div>
<div>
  <p>inset shadow </p>
  <p>border-radius </p>
  <p>decreased shadow </p>
</div>

    you may also draw citrus slices https://codepen.io/gcyrillus/pen/wutEK .

    but SVG would be at best here 😉

    Login or Signup to reply.
  3. 0

    You could make use of a pseudo element and have an overflow:hidden to hide the rest of the pseudo element’s parts that fall outside of the div’s ‘outer circle’

    div {
  height: 200px;
  width: 200px;
  overflow: hidden;
  border: 5px solid black;
  background:orange;
  border-radius: 50%;
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  border: inherit;
  border-radius: 50%;
  background: white;
  top: -20%;
  left: -100%;
}
    <div></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search