Вопросы Теги

Как создать вырезанную шестиугольную форму?

Следующий код работал для меня.

Я использовал два потока один, чтобы получить raw_Input, а другой - ждать определенного времени. Если какой-либо из потоков выходит, оба потока завершаются и возвращаются. 

def _input(msg, q):
    ra = raw_input(msg)
    if ra:
        q.put(ra)
    else:
        q.put("None")
    return

def _slp(tm, q):
    time.sleep(tm)
    q.put("Timeout")
    return

def wait_for_input(msg="Press Enter to continue", time=10):
    q = Queue.Queue()
    th = threading.Thread(target=_input, args=(msg, q,))
    tt = threading.Thread(target=_slp, args=(time, q,))

    th.start()
    tt.start()
    ret = None
    while True:
        ret = q.get()
        if ret:
            th._Thread__stop()
            tt._Thread__stop()
            return ret
    return ret

print time.ctime()    
t= wait_for_input()
print "\nResponse :",t 
print time.ctime()
21
задан Akshay 23 December 2015 в 05:48
поделиться

3 ответа

Подход SVG явно хорош! Но я попытался сделать это с помощью CSS! Каким-то образом мне удалось получить его до здесь ... 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
body {
  background: url('http://lorempicsum.com/up/627/300/4') no-repeat top left;
  background-size: cover;
  padding-top: 10%;
}
.parent {
  margin: 0 auto;
  display: table;
  width: 400px;
  height: 230px;
  text-align: center;
  table-layout: fixed;
}
.orange {
  display: table-cell;
  vertical-align: middle;
  background: transparent;
  width: 100%;
  height: 230px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border-left: 137px solid orange;
  border-right: 137px solid orange;
}
.one,
.two {
  position: relative;
  width: 126px;
  height: auto;
  display: block;
  border-left: 28px solid orange;
  border-right: 28px solid orange;
  margin: 0 auto;
}
.one {
  border-top: 60px solid transparent;
  border-bottom: 60px solid orange;
}
.two {
  border-top: 60px solid orange;
  border-bottom: 60px solid transparent;
}
<div class="parent">
  <div class="orange">
    <div class="two"></div>
    <div class="one"></div>
  </div>
</div>
7
ответ дан Peter Mortensen 23 December 2015 в 05:48
поделиться

Этот тип формы может быть достигнут путем заполнения внешней части шестиугольника с использованием элементов. Различные transform:rotate(xdeg) должны применяться к каждому элементу для достижения этого эффекта.

Вот фрагмент, создающий этот эффект.

Примечание. Предполагается, что приведенный ниже фрагмент кода является отзывчивым, поэтому, если он кажется сломанным, см. Приведенный ниже. 

* {
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    background: url('https://placeimg.com/800/600/any');
    background-size: cover;
    background-attachment: fixed;
}

.container {
    width: 50%;
    height: 50%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    border: 10px solid #009688;
}

.cut:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 0% 100%;
    transform: rotate(-60deg);
    top: 0;
}

.cut:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 0% 0%;
    transform: rotate(60deg);
    top: 0;
}

.container:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 100% 0%;
    transform: rotate(-60deg);
    top: 0;
}

.container:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 100% 100%;
    transform: rotate(60deg);
    top: 0;
}
<div class="container">
    <div class="cut"></div>
</div>

С фиксированной высотой и шириной (лучше просматривать в полноэкранном режиме): 

* {
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    background: url('https://placeimg.com/800/600/any');
    background-size: cover;
    background-attachment: fixed;
}

.container {
    width: 500px;
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    border: 10px solid #009688;
}

.cut:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 0% 100%;
    transform: rotate(-60deg);
    top: 0;
}

.cut:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 0% 0%;
    transform: rotate(60deg);
    top: 0;
}

.container:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 100% 0%;
    transform: rotate(-60deg);
    top: 0;
}

.container:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 100% 100%;
    transform: rotate(60deg);
    top: 0;
}
<div class="container">
    <div class="cut"></div>
</div>

Вот как работает вырезанный шестиугольник:

16
ответ дан Akshay 23 December 2015 в 05:48
поделиться

SVG - лучший инструмент для таких вещей, и самым большим фактором, способствующим этому, является то, что легче создавать и поддерживать такие формы, как SVG.

Но это можно сделать с помощью CSS transform и другим способом с более простыми преобразованиями. Все, что нам нужно сделать, это использовать преобразование skew и установить угол наклона в зависимости от требуемой формы.

Для шестиугольников угол между каждой стороной составляет 120 градусов, и поэтому элементы должны быть перекошены на +/- 30 градусов. Для пятиугольников угол между каждой стороной составляет 108 градусов, и поэтому углы наклона в нижней половине будут +/- 18 градусов, но в верхней половине будет +/- 36 градусов. Для алмаза угол между каждой стороной составляет 90 градусов, и поэтому углы наклона будут +/- 45 градусов.

Несколько положительных моментов этого подхода: ( не то, что SVG не имеет этих )

  • Формы, созданные с использованием этого подхода отзывчивый ( попробуйте навести курсор на фигуры в демоверсии )
  • Преобразования довольно хорошо поддерживаются, учитывая, что IE8 находится на выходе (сами Microsoft прекращают поддержку IE8 с января '16). Это неплохо по сравнению с SVG , потому что SVG имеет такую ​​же поддержку браузера.

Существует довольно много недостатков использования CSS , хотя:

  • Для создания формы требуются дополнительные элементы.
  • Они будут работать только в IE9 + (то есть браузерах, которые поддерживают преобразования). Недостаток не в сравнении с SVG, а в целом.
  • Заполнение для области, отличной от выреза, не может быть градиентом или изображением. Это может быть только сплошной цвет.
  • Эффекты наведения могут быть добавлены (как показано в демонстрационной версии), но они будут срабатывать, когда мышь находится над областью выреза, также потому, что она все еще является частью контейнера, даже если она прозрачная. 

.shape {
  position: relative;
  height: 100px;
  border: 20px solid palevioletred;
  overflow: hidden;
}
.shape.hexagon {
  width: calc(100px + (100px * 0.577)); /* width = height + (height * tan 30) for hexagon */
}
.shape.pentagon {
  width: calc(100px * 1.051); /* width = height * 1.618/1.539 for pentagon (Source: Wiki - https://en.wikipedia.org/wiki/Pentagon */
}
.shape.diamond {
  width: 100px; /* height = width for diamond */
}
.hexagon .inner, .pentagon .inner, .diamond .inner {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0px;
  left: 85%;
}
.diamond .inner {
  left: 100%;
}
.shape:after, .shape:before {
  position: absolute;
  content: '';
  height: 50%;
  width: 50%;
  left: -35%;
  background: palevioletred;
}
.shape.diamond:before, .shape.diamond:after {
  left: -50%;
}
.hexagon .inner:after, .hexagon .inner:before, .pentagon .inner:after,
.pentagon .inner:before, .diamond .inner:after, .diamond .inner:before {
  position: absolute;
  content: '';
  height: 50%;
  width: 100%;
  left: 0px;
  background: palevioletred;
}
.shape.hexagon:before, .hexagon .inner:after {
  transform: skew(-30deg);
}
.shape.hexagon:after, .hexagon .inner:before {
  transform: skew(30deg);
}
.shape.pentagon:before {
  transform: skew(-36deg);
}
.shape.pentagon:after{
  transform: skew(18deg);
}
.shape.diamond:before, .diamond .inner:after {
  transform: skew(-45deg);
}
.shape.diamond:after, .diamond .inner:before {
  transform: skew(45deg);
}
.pentagon .inner:before {
  transform: skew(36deg);
}
.pentagon .inner:after {
  transform: skew(-18deg);
}
.shape:before, .inner:before {
  top: 0px;
  transform-origin: right bottom;
}
.shape:after, .inner:after {
  bottom: 0px;
  transform-origin: right top;
}

/* just for demonstrating responsiveness */

.shape {
  float: left;
  margin: 10px;
  transition: all 1s linear;
}
.shape:hover{ height: 150px; }
.shape.hexagon:hover { width: calc(150px + (150px * 0.577)); }
.shape.pentagon:hover { width: calc(150px * 1.051); }
.shape.diamond:hover { width: 150px; }
body {
  background: url(http://lorempixel.com/500/500/nature/6) fixed;
  background-size: cover;
}
<div class='shape hexagon'>
  <div class='inner'></div>
</div>
<div class='shape pentagon'>
  <div class='inner'></div>
</div>
<div class='shape diamond'>
  <div class='inner'></div>
</div>

enter image description here

11
ответ дан Harry 23 December 2015 в 05:48
поделиться