CSS Coffee Cup

CSS Coffee Cup

CSS Coffee Cup CSS Coffee Cup
HTML
<div class="coffee-cup">
  <div class="left-side"></div>
  <div class="logo"></div> 
  <div class="right-side"></div>
  <div class="bottom-side">
</div>
CSS
.coffee-cup {
  position: relative;
  width: 220px;
  height: 280px;
  background: #FFF;
}

.coffee-cup:before {
   content: '';
   position: absolute;
   top: -40px;
   background: #FFF;
   width: 220px;
   height: 30px;    
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
}
 
.left-side {
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 280px 0 0 40px;
    border-color: transparent transparent transparent #ffb777;
}

.right-side {
    position: absolute;
    right: 0;
    width: 0;
    height: 0;
    width: 0; 
    border-style: solid;
    border-width: 0 0 280px 40px;
    border-color: transparent transparent #ffb777 transparent;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 120px;
  height: 120px;
  background: #ffb777;
  border-radius: 50%;
}

.bottom-side {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 30px;
  background: #FFF;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
CSS Coffee Cup
HTML
<div class="coffee-cup">
  <div class="left-side"></div>
  <div class="logo"></div>
  <div class="right-side"></div>
</div>
CSS
.coffee-cup {
  position: relative;
  width: 220px;
  height: 300px;
  background: #FFF;
}

.coffee-cup:before {
   content: '';
   position: absolute;
   top: -40px;
   background: #FFF;
   width: 220px;
   height: 30px;    
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
}

.coffee-cup:after {
   content: '';
   position: absolute;
   background: #FFF;
   top: -55px;
   left: 50%;
   transform: translateX(-50%);
   width: 180px;
   height: 15px; 
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
}

.left-side {
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 300px 0 0 40px;
    border-color: transparent transparent transparent #64c77b;
}

.right-side {
    position: absolute;
    right: 0;
    width: 0;
    height: 0;
    width: 0; 
    border-style: solid;
    border-width: 0 0 300px 40px;
    border-color: transparent transparent #64c77b transparent;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 120px;
  height: 120px;
  background: #64c77b;
  border-radius: 50%;
}
501 Views
84530cookie-checkCSS Coffee Cup

Leave a Reply

Your email address will not be published. Required fields are marked *