CSS broke a square into 4 triangles

Question

Currently, I am trying to make a square equal to 4 triangles of the same size that the events induce on them.

I create triangles like this

.right, left, .top, .bottom {
    position: relative;
    width: 26px;
}

.right:before{
  position: absolute;
  display: inline-block;
  border-top: 26px solid transparent;
  border-right: 26px solid #eee;
  border-bottom: 26px solid transparent;
  left: 26px;
  top: 0px;
  content: '';
}

What I find is that each triangle sits above each other and only one triangle can be seen, here is my example,

http://codepen.io/anon/pen/qdmbKz

As you can see, only the bottom triangle (hover at the bottom of the square) is dependent. What am I doing wrong? Is there a better way to do this?

Answer 1

, , hover , , , .

- . , . , , , , hover .

SVG , CSS.

SVG:

SVG polygon , polygon . , a (anchor).

.square {
  height: 400px;
  width: 400px;
  overflow: hidden;
}
svg {
  height: 100%;
  width: 100%;
}
polygon {
  fill: aliceblue;
  stroke: crimson;
  stroke-linejoin: round;
}
polygon:hover {
  fill: cornflowerblue;
}

<div class='square'>
  <svg viewBox='0 0 100 100'>
    <a xlink:href='http://google.com'>
      <polygon points='5,5 50,50 95,5' />
    </a>
    <polygon points='5,5 50,50 5,95' />
    <polygon points='5,95 50,50 95,95' />
    <polygon points='95,5 50,50 95,95' />
  </svg>
</div>

Hide result

---

CSS

, -. , , .

, , :

• . , CSS.
• , . , ( ).
• . transform-origin top left , .
• overflow: hidden, .
• , 4 , . , .

^{. script, , , .}

.square {
  position: relative;
  height: 200px;
  width: 200px;
  border: 2px solid crimson;
  overflow: hidden;
  transition: all 1s;
}
.top,
.left,
.right,
.bottom {
  position: absolute;
  height: calc(100% / 1.414);
  width: calc(100% / 1.414);
  top: 50%;
  left: 50%;
  border: 1px solid crimson;
  transform-origin: 0% 0%;
}
.right {
  transform: rotate(-45deg);
}
.bottom {
  transform: rotate(45deg);
}
.top {
  transform: rotate(-135deg);
}
.left {
  transform: rotate(135deg);
}
.square > div:hover {
  background: tomato;
}

/*Just for demo*/

.square:hover{
  height: 300px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='square'>
  <div class="top"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  <div class="left"></div>
</div>

Hide result

Answer 2

- : http://codepen.io/potterbm/pen/GJmoYj

HTML:

<div class="green">
    <div class="top"></div><div class="left"></div><div class="right"></div><div class="bottom"></div>
</div>

CSS

.green {
  background-color: #cccccc;

  display: block;
  margin: 100px auto;
  height:100px;
  width:100px;
}

.right, .left, .top, .bottom {
  border-color: transparent;
  border-style: solid;
  border-width: 50px;

  display: block;
  padding: 0;
  width: 0;
  height: 0;
}

.right, .left {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}

.top, .bottom {
  margin: 0 auto;
}

.top {
  border-top-color: green;

  margin-bottom: -100px;
}

.right {
  border-right-color: blue;
  margin-left: -50px;
}

.bottom {
  border-bottom-color: steelblue;
  margin-top: -100px;
}

.left {
  border-left-color: red;
  margin-right: -50px;
}


.right:hover {
    border-right-color:red;
}

.left:hover {
  border-left-color:red;
}

.top:hover {
  border-top-color:red;
}

.bottom:hover {
  border-bottom-color:red;
}

, , . . , HTML .