Как сделать изогнутый шестиугольник края с помощью CSS

Это мой CSS.

в CSS

#hexagon-circle { 
    width: 100px; 
    height: 55px; 
    background: red; 
    position: relative;
    border-radius: 10px;} 
#hexagon-circle:before { 
    content: ""; 
    position: absolute; 
    top: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 29px solid red;
    border-radius: 10px;} 
#hexagon-circle:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 29px solid red;
    border-radius: 10px;}

выход 4 края шестиугольника изогнут, но верхняя часть и дно нет. Я хочу сделать весь край шестиугольника изогнутым. Как сделать верхний и нижний край изогнутым? или Как сделать верхний край треугольника изогнутым?

http://jsfiddle.net/yR7zt/1

8
css css-shapes css3 html

5 ответов

Я думаю, вы ищете это.

в CSS

.hex {
  position: relative;
  margin: 1em auto;
  width: 10em; height: 17.32em;
  border-radius: 1em/.5em;
  background: orange;
  transition: opacity .5s;
}
.hex:before, .hex:after {
  position: absolute;
  width: inherit; height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}
.hex:before {
   -webkit-transform: rotate(60deg);
   -ms-transform: rotate(60deg);/*Added for IE9*/
   transform: rotate(60deg);
}
.hex:after {
  -webkit-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);/*Added for IE9*/
  transform: rotate(-60deg);
}

скрипка

в поиск, пожалуйста, немного в следующий раз прежде чем задавать вопрос. Без обид :)

14

Я понимаю, что это довольно старый вопрос, но я думал, что добавлю ответ, чтобы показать больше о как это работает.

так, во-первых, нам нужно создать один элемент на странице. Я пошел на площадь height:300px; width:180px; и радиус границы 10px. Просто потому, что мне нравится округлость числа (простите за каламбур). Придание этому элементу position:relative; означает, что мы можем здесь расположить все absolutely относительно этого div.

затем нам нужно чтобы создать два псевдо-элемента, с той же высотой и шириной, что и родительский.

потому что псевдо-элементы-это именно то, псевдо-элементы, нам нужно добавить content: к ним. И поскольку мы можем поместить материал в родителя, нам это не нужно, поэтому установите их в "";

это приводит нас к тому, как создать шестиугольник, а не прямоугольник, который мы в настоящее время имеем. Для этого нам придется включить вращение, чтобы генерировать другие стороны шестиугольника. С 6 сторонами, и углами добавить к 360, мы можем повернуть один из псевдо элемента 60 градусами. Другой мы повернем на -60 градусов (или 300 градусов, если хотите).

это оставляет нас с нашим "шестиугольником", в котором мы можем добавить некоторые хорошие стили и анимации наведения, как нужно:

.roundHex {
  position: relative;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  height: 300px;
  width: 180px;
  transition: all 1s;
  line-height:300px;
  text-align:center;
  color:white;
  font-size:20px;
}
.roundHex:before,
.roundHex:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: inherit;
  border-radius: inherit;
  height: 100%;
  width: 100%;
  z-index:-1;
}
.roundHex:before {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg);
  transition: all 1s 0.5s;
}
.roundHex:after {
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  transform: rotate(-60deg);
  transition: all 1s 1s;
}
.roundHex:hover {
  background: tomato;
}
<div class="roundHex">HOVER ME</div>

Jsfiddle демо также доступны

6

попробуйте так: (работает в chrome и ie 10)

<br><br><br>
<div id="hexagon-circle"></div>
<style>
 #hexagon-circle {
    position: relative;
    margin: 1em auto;
    width: 10em; height: 17.32em;
    border-radius: 1em/.5em;
    opacity: .25;
    background: orange;
    transition: opacity .5s;
    cursor: pointer;
 }
 #hexagon-circle:before, #hexagon-circle:after {
    position: absolute;
    width: inherit; height: inherit;
    border-radius: inherit;
    background: inherit;
    content: '';
  }
  #hexagon-circle:before {
   transform: rotate(60deg);
   -ms-transform:rotate(60deg); /* IE 9 */
   -webkit-transform:rotate(60deg); /* Opera, Chrome, and Safari */
  }
  #hexagon-circle:after {
    transform: rotate(-60deg);
    -ms-transform:rotate(-60deg); /* IE 9 */
    -webkit-transform:rotate(-60deg); /* Opera, Chrome, and Safari */
  }

  </style>
1

вы можете попробовать этот подход:

в CSS 

#hexagon-circle { 
position: relative;
margin: 1em auto;
width: 10em;
height: 17.32em;
border-radius: 1em/.5em;
background: red;
transition: opacity .5s;
cursor: pointer;} 

#hexagon-circle:before { 
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
-webkit-transform: rotate(60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(60deg);  /* IE 9 */
transform: rotate(60deg);} /* Firefox 16+, IE 10+, Opera */

#hexagon-circle:after { 
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
-webkit-transform: rotate(-60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(-60deg);  /* IE 9 */
transform: rotate(-60deg);} /* Firefox 16+, IE 10+, Opera */

демо

http://jsfiddle.net/yR7zt/4/

1

С вашим текущим кодом, используя треугольник сверху и снизу, вы можете немного изменить их, чтобы придать ему изогнутый вид. Добавьте ширину 4px to #hexagon-circle:before и #hexagon-circle:after и уменьшить border-left и border-right by 2px каждый.

в JS скрипку здесь

#hexagon-circle { 
  width: 100px; 
  height: 55px; 
  background: red; 
  position: relative;
  border-radius: 10px;
}

#hexagon-circle:before { 
  content: ""; 
  position: absolute; 
  top: -25px; 
  left: 0; 
  width: 4px; 
  height: 0; 
  border-left: 48px solid transparent; 
  border-right: 48px solid transparent; 
  border-bottom: 29px solid red;
  border-radius: 10px;
}

#hexagon-circle:after { 
  content: ""; 
  position: absolute; 
  bottom: -25px; 
  left: 0; 
  width: 4px; 
  height: 0; 
  border-left: 48px solid transparent; 
  border-right: 48px solid transparent; 
  border-top: 29px solid red;
  border-radius: 10px;
}

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

0