Как нарисовать конус на CSS?

Хочу сделать Гюнтера из «Adventure Time», а именно клюв как на этой картинке: 

Как нарисовать такой клюв (конус) средствами CSS?
    

Ответы

Ответ 1

.block {      
    position: relative;    
}
.block::before,
.block::after {
    content: '';
    position: absolute; left: -20px;  top: 20px;   
    border: 20px solid transparent;	
    border-right: 80px solid #f00;
    border-radius: 180px;   
}
.block::after {
    border: 18px solid transparent;
    border-right: 70px solid #F2C255;
    top: 22px;
    left: -10px;    
}



Ответ 2

Вот вариант, полностью удовлетворяющий исходным требованиям:



/* pingvin */
.pingvin {
    position: relative;
    width: 210px;
    height: 350px;
    margin: 40px auto;
    background: #152734;
    border-radius: 150px 150px 0px 0px;
}

/* hands */
.pingvin::before,
.pingvin::after {
    content: "";
    position: absolute;
    width: 45px;
    height: 85px;
    top: 195px;
    background: #152734;
    transform: rotate(32deg);
}

.pingvin::before {
    left: -22px;
    border-radius: 0px 0 12px 36px;
}

.pingvin::after {
    right: 40px;
    border-radius: 0px 0px 23px 18px;
}

/* body */
.center {
    position: absolute;
    left: -2px;
    bottom: 0px;
    width: 150px;
    height: 325px;
    background: #fbf8e3;
    border: 2px solid #152734;
    border-radius: 150px 150px 0 0;
}

.center:before,
.center:after {
    content: '';
    position: absolute;
}

.center:before {
    width: 208px;
    height: 68px;
    bottom: -35px;
    left: -2px;
    background: #fbf8e3;
    border: 2px solid #152734;
    border-top: none;
    border-radius: 0 0 50% 50%;
}

.center:after {
    width: 60px;
    height: 67px;
    bottom: -29px;
    left: 150px;
    background: #152734;
    border-radius: 0px 0 60% 0px;
}

/* pingvin nose */
.nose {      
    position: relative;
    z-index: 10;
}

.nose::before,
.nose::after {
    content: '';
    position: absolute;
    left: -40px;
    top: 70px;
    border: 15px solid transparent;
    border-right: 90px solid #202323;
    border-radius: 180px;
    transform: rotate(-12deg);
}

.nose::after {
    top: 72px;
    left: -31px;
    border: 12px solid transparent;
    border-right: 82px solid #f2c255;
}

/* pingvin eye */
.eye {
    position: absolute;
    width: 43px;
    height: 43px;
    top: 39px;
    background: #000;
    border-radius: 50%;
}

.eye:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 3px;
    left: 6px;
    background: #fefefe;
    border-radius: 13px 8px 13px 8px;
}

.eye.right {
    left: 1px;
}

.eye.left {
    left: 75px;
}


    

    

    







Этот же пример на CodePen: http://codepen.io/Koziuk-S/pen/GZGxQb?editors=1100.


Ответ 3

Это конечно отличается но я не старался особо 



.pingvin {
  width: 250px;
  height: 400px;
  background: #152734;
  border-radius: 150px 150px 10% 10%;
  position: relative;
  margin: 40px auto;
  overflow: ;
}

.pingvin::before {
  content: "";
  display: block;
  width: 90px;
  height: 60px;
  background: #152734;
  position: absolute;
  left: -90px;
  top: 200px;
  border-radius: 50px 0 0 30px;
}

.pingvin::after {
  content: "";
  display: block;
  width: 90px;
  height: 60px;
  background: #152734;
  position: absolute;
  right: 46px;
  top: 200px;
  border-radius: 50px 0 0 30px;
}

.center {
  width: 200px;
  height: 380px;
  border-radius: 140px 140px 0 0;
  background: #fbf8f3;
  position: absolute;
  left: 3px;
  bottom: 3px;
  border-radius: 150px 150px 10% 10%;
}

.nose {
  width: 100%;
  height: 30px;
  margin: 50px 0;
}

.nose .n1 p {
  display: inline-block;
  width: 39px;
  height: 39px;
  background: #000;
  border-radius: 29px;
  margin: 0 20px;
  position: relative;
}

.nose .n1 p:after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #fefefe;
  position: absolute;
  top: 3px;
  left: 3px;
  top: ;
}

#nose {
  position: relative;
}

#nose::before,
#nose::after {
  content: '';
  position: absolute;
  left: -10px;
  top: -45px;
  border: 20px solid transparent;
  border-right: 80px solid #f2c255;
  border-radius: 180px;
}

/*#nose::after {
	border: 18px solid transparent;
	border-right: 70px solid #F2C255;
	top:-22px;
	left: -10px;    
}*/

  

    

      

        

        

      
      

    
  





За Нос спасибо Соледар10 - пришлось применить его решение


Ответ 4

Решение: http://codepen.io/anon/pen/aNYQdK



.cone {
  -webkit-transform: rotate(-45deg);
  top: 144px;
  left: 234px;
  position: absolute;
  display: block;
}

.cone:before {
  width: 146px;
  height: 74px;
  top: 43px;
  background: #F7B137;
  left: 4px;
  -webkit-transform: rotate(-45deg);
  z-index: 1;
  border-radius: 50%;
  content: '';
  position: absolute;
  display: block;
}

.cone:after {
  width: 0;
  height: 0;
  top: -60px;
  left: -56px;
  border-bottom: 160px solid #F7B137;
  border-left: 73px solid transparent;
  border-right: 73px solid transparent;
  -webkit-transform: rotate(-45deg);
  content: '';
  position: absolute;
  display: block;
}