29

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

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

1
  • Не легче ли SVG использовать?
    – Alex78191
    24 июн 2017 в 8:25

4 ответа 4

23

.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;    
}
<div class="block"></div>

21

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

/* 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;
}
<div class="pingvin">
<div class="center">
    <div class="nose"></div>
    <div class="eye right"></div>
    <div class="eye left"></div>
</div>
</div>

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

10

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

.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;    
}*/
<div class="pingvin">
  <div class="center">
    <div class="nose">
      <div class="n1">
        <p></p>
        <p></p>
      </div>
      <p id="nose"></p>
    </div>
  </div>
</div>

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

1
  • Получилось очень даже неплохо)
    – Invision
    15 апр 2016 в 22:32
8

Решение: 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;
}
<div class="cone"></div>

3
  • Как быть с бордером? 14 апр 2016 в 18:49
  • через background-clip: border-box
    – Invision
    14 апр 2016 в 18:51
  • @IhorTkachuk, filter: drop-shadow, если поддерживается.
    – Qwertiy
    20 мая 2019 в 16:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.