7

これは重複していません 助けてください

私はここでいくつかのトリックを手に入れましたhttp://jsfiddle.net/kizu/bhGn4/

で動的に作成したいのですがCSS、どうすればいいですか？

自動的に調整される新しいエントリがデザインに追加されるたびに。

私は一生懸命検索しようとしましたが、ここで円の形の助けを得ました

css、javascriptで円の周りに円を作成する方法は?

六角形で欲しいものと同じ

ここに画像の説明を入力

4

3 に答える 3

2

私が作成したこのデモをご覧ください。

.hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: absolute;
}
.hexagon:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid red;
}
.hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;
}
.hex1 {
  top: 20px;
  left: 0px;
}
.hex2 {
  top: 20px;
  left: 110px;
}
.hex3 {
  top: 20px;
  left: 220px;
}
.hex4 {
  top: 110px;
  left: 55px;
}
.hex5 {
  top: 110px;
  left: 165px;
}
.hex6 {
  top: 110px;
  left: 275px;
}
<div style="position:absolute; top:30px">
  <div class="hexagon hex1"></div>
  <div class="hexagon hex2"></div>
  <div class="hexagon hex3"></div>
  <div class="hexagon hex4"></div>
  <div class="hexagon hex5"></div>
  <div class="hexagon hex6"></div>
</div>

于 2013-09-26T12:28:12.033 に答える
0

CSS を使用して六角形を作成するための優れたチュートリアルがここにあります。最初にステップバイステップガイドをチェックしてください。

純粋な CSS3 で六角形を作成する

CSSTricks のこの例も参照してください。この種の問題にアプローチする方法のアイデアが得られます。

CSSの形状

それが役立つことを願っています! :)

于 2014-01-16T11:52:20.540 に答える