Rectangle 27 79

Weird bug indeed. Performing the transformation in wrapping g element as an SVG transform does not resolve the issue.

inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';

Thanks, that works nicely :) I figured out how the color change happens, it's switching the R and B values from the fill color. The color is #ff0000 and it's switching it to #0000ff. I tried with different values for R and B and saw that it was always the inverse. However the G value is unchanged, in fact if you try the color #00FF00 the card color will not change during rotation. Anyway, thanks for the workaround, I've marked this answer as accepted.

@EinarEgilsson: ...and that pretty much explains what's happening. Clearly, someone's using the wrong byte order when rendering the rotated image.

@PaulSchreiber Actually it looks like it's already been fixed, people with a newer build of Safari 10 don't seem to be getting this.

@DarioOO Because half correct is better than not trying.

html - SVG changes color when rotated in Safari 10 - Stack Overflow

html css svg safari
Rectangle 27 4

You can use a rotated container with overflow hidden. This will allow you to display those images over an other image a gradient or any other non plain background :

.wrap {
    transform-origin:0 100%;
    transform:rotate(-3deg);
    overflow:hidden;
    width:100%;
    padding-right:5%;
}
.images {
    transform-origin:inherit;
    transform:rotate(3deg);
    overflow:hidden;
    -webkit-backface-visibility:hidden; /** <-- to prevent diagonal line aliasing in chrome **/
}
img {
    float:left;
    width:24%;
    margin:0 .5%;
}

/** FOR THE DEMO **/
body{background:url('https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg');background-size:cover;overflow-x:hidden;}
<div class="wrap">
    <div class="images">
        <img src="http://lorempixel.com/output/people-q-c-300-200-9.jpg" alt="" />
        <img src="http://lorempixel.com/output/people-q-c-300-200-3.jpg" alt="" />
        <img src="http://lorempixel.com/output/people-q-c-300-200-6.jpg" alt="" />
        <img src="http://lorempixel.com/output/people-q-c-300-200-1.jpg" alt=""/>
    </div>
</div>

this is the solution we've chosen to go with, if you were interested to see the implementation its here: codepen.io/anon/pen/dPgmRL

html - Creating a responsive triangle with repeating background image ...

html css svg responsive-design css-shapes
Rectangle 27 0

You need to rotate the links themselves. Right now, you're not rotating anything, you're just showing images with rotated boxes. Instead, make the background image unrotated and rotate them with CSS.

-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);

html - Diamond menu items using CSS and SVG - Stack Overflow

html css css3 svg css-shapes
Rectangle 27 0

In short, I used the CSS border-radius and z-index properties to create a white half circle layered beneath an orange center circle and orange outer ring. Initially, the half-circle is completely hidden behind an additional layer of orange on the left side, but its outer edge is gradually revealed as it rotates around the center axis (via CSS transform: rotate()), creating the appearance of a progress bar. Additional trickery is required once the progress bar passes the halfway point (see below the snippet for more info).

All of this was done with pure HTML and CSS, except the animation, which uses JavaScript. It may appear to require more code than the SVG-based solutions, but the markup is actually much simpler, which makes it a good alternative in my opinion.

function setProgress(elem, percent) {
  var
    degrees = percent * 3.6,
    transform = /MSIE 9/.test(navigator.userAgent) ? 'msTransform' : 'transform';
  elem.querySelector('.counter').setAttribute('data-percent', Math.round(percent));
  elem.querySelector('.progressEnd').style[transform] = 'rotate(' + degrees + 'deg)';
  elem.querySelector('.progress').style[transform] = 'rotate(' + degrees + 'deg)';
  if(percent >= 50 && !/(^|\s)fiftyPlus(\s|$)/.test(elem.className))
    elem.className += ' fiftyPlus';
}

(function() {
  var
    elem = document.querySelector('.circlePercent'),
    percent = 0;
  (function animate() {
    setProgress(elem, (percent += .25));
    if(percent < 100)
      setTimeout(animate, 15);
  })();
})();
.circlePercent {
  position: relative;
  top: 26px;
  left: 26px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: orange;
}
.circlePercent:before,
.circlePercent > .progressEnd {
  position: absolute;
  z-index: 3;
  top: 2px;
  left: 45px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  -ms-transform-origin: 3px 46px;
  transform-origin: 3px 46px;
  content: "";
}
.circlePercent:after,
.circlePercent > .progress {
  position: absolute;
  -ms-transform-origin: 48px 48px;
  transform-origin: 48px 48px;
  z-index: 0;
  top: 0;
  left: 0;
  width: 48px;
  height: 96px;
  border-radius: 48px 0 0 48px;
  background: orange;
  content: "";
}
.circlePercent.fiftyPlus:after {
  background: white;
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.circlePercent > .progress.progress {
  background: white;
}
.circlePercent > .counter {
  position: absolute;
  box-sizing: border-box;
  z-index: 2;
  width: 100px;
  height: 100px;
  margin-top: -2px;
  margin-left: -2px;
  border-radius: 50%;
  border: 4px solid orange;
}
.circlePercent > .counter:before {
  position: absolute;
  z-index: 1;
  top: 50%;
  margin-top: -13px;
  width: 100%;
  height: 26px;
  font-size: 26px;
  line-height: 26px;
  font-family: sans-serif;
  text-align: center;
  color: white;
  content: attr(data-percent) "%";
}
.circlePercent > .counter:after {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 6px;
  left: 6px;
  border-radius: 50%;
  background: orange;
  content: "";
}
.circlePercent > .counter[data-percent="100"] {
  background: white;
}
<div class="circlePercent">
  <div class="counter" data-percent="0"></div>
  <div class="progress"></div>
  <div class="progressEnd"></div>
</div>

Notice that the fiftyPlus class is added to the container element once the progress bar reaches the halfway point. This adds a static progress bar to the right half of the circle. Without it, the progress will appear to drain out of the right side instead of filling in the left side.

html - Circular percent progress bar - Stack Overflow

html css css3 svg css-shapes
Rectangle 27 0

In short, I used the CSS border-radius and z-index properties to create a white half circle layered beneath an orange center circle and orange outer ring. Initially, the half-circle is completely hidden behind an additional layer of orange on the left side, but its outer edge is gradually revealed as it rotates around the center axis (via CSS transform: rotate()), creating the appearance of a progress bar. Additional trickery is required once the progress bar passes the halfway point (see below the snippet for more info).

All of this was done with pure HTML and CSS, except the animation, which uses JavaScript. It may appear to require more code than the SVG-based solutions, but the markup is actually much simpler, which makes it a good alternative in my opinion.

function setProgress(elem, percent) {
  var
    degrees = percent * 3.6,
    transform = /MSIE 9/.test(navigator.userAgent) ? 'msTransform' : 'transform';
  elem.querySelector('.counter').setAttribute('data-percent', Math.round(percent));
  elem.querySelector('.progressEnd').style[transform] = 'rotate(' + degrees + 'deg)';
  elem.querySelector('.progress').style[transform] = 'rotate(' + degrees + 'deg)';
  if(percent >= 50 && !/(^|\s)fiftyPlus(\s|$)/.test(elem.className))
    elem.className += ' fiftyPlus';
}

(function() {
  var
    elem = document.querySelector('.circlePercent'),
    percent = 0;
  (function animate() {
    setProgress(elem, (percent += .25));
    if(percent < 100)
      setTimeout(animate, 15);
  })();
})();
.circlePercent {
  position: relative;
  top: 26px;
  left: 26px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: orange;
}
.circlePercent:before,
.circlePercent > .progressEnd {
  position: absolute;
  z-index: 3;
  top: 2px;
  left: 45px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  -ms-transform-origin: 3px 46px;
  transform-origin: 3px 46px;
  content: "";
}
.circlePercent:after,
.circlePercent > .progress {
  position: absolute;
  -ms-transform-origin: 48px 48px;
  transform-origin: 48px 48px;
  z-index: 0;
  top: 0;
  left: 0;
  width: 48px;
  height: 96px;
  border-radius: 48px 0 0 48px;
  background: orange;
  content: "";
}
.circlePercent.fiftyPlus:after {
  background: white;
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.circlePercent > .progress.progress {
  background: white;
}
.circlePercent > .counter {
  position: absolute;
  box-sizing: border-box;
  z-index: 2;
  width: 100px;
  height: 100px;
  margin-top: -2px;
  margin-left: -2px;
  border-radius: 50%;
  border: 4px solid orange;
}
.circlePercent > .counter:before {
  position: absolute;
  z-index: 1;
  top: 50%;
  margin-top: -13px;
  width: 100%;
  height: 26px;
  font-size: 26px;
  line-height: 26px;
  font-family: sans-serif;
  text-align: center;
  color: white;
  content: attr(data-percent) "%";
}
.circlePercent > .counter:after {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 6px;
  left: 6px;
  border-radius: 50%;
  background: orange;
  content: "";
}
.circlePercent > .counter[data-percent="100"] {
  background: white;
}
<div class="circlePercent">
  <div class="counter" data-percent="0"></div>
  <div class="progress"></div>
  <div class="progressEnd"></div>
</div>

Notice that the fiftyPlus class is added to the container element once the progress bar reaches the halfway point. This adds a static progress bar to the right half of the circle. Without it, the progress will appear to drain out of the right side instead of filling in the left side.

html - Circular percent progress bar - Stack Overflow

html css css3 svg css-shapes
Rectangle 27 0

Its a good idea, and almost works but you can see the join between the 2 divs (that rotated div and the rest of the button).

How to make iphone angled back button using CSS or SVG with sematic ht...

android html mobile css3 svg
Rectangle 27 0

You can use a rotated container with overflow hidden. This will allow you to display those images over an other image a gradient or any other non plain background :

.wrap {
    transform-origin:0 100%;
    transform:rotate(-3deg);
    overflow:hidden;
    width:100%;
    padding-right:5%;
}
.images {
    transform-origin:inherit;
    transform:rotate(3deg);
    overflow:hidden;
    -webkit-backface-visibility:hidden; /** <-- to prevent diagonal line aliasing in chrome **/
}
img {
    float:left;
    width:24%;
    margin:0 .5%;
}

/** FOR THE DEMO **/
body{background:url('https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg');background-size:cover;overflow-x:hidden;}
<div class="wrap">
    <div class="images">
        <img src="http://lorempixel.com/output/people-q-c-300-200-9.jpg" alt="" />
        <img src="http://lorempixel.com/output/people-q-c-300-200-3.jpg" alt="" />
        <img src="http://lorempixel.com/output/people-q-c-300-200-6.jpg" alt="" />
        <img src="http://lorempixel.com/output/people-q-c-300-200-1.jpg" alt=""/>
    </div>
</div>

this is the solution we've chosen to go with, if you were interested to see the implementation its here: codepen.io/anon/pen/dPgmRL

html - Creating a responsive triangle with repeating background image ...

html css svg css-shapes
Rectangle 27 0

You can use and reuse symbols, which can have individual viewBoxes and be rotated and scaled like groups. The units in the symbols are proportional to the viewBox.

Here is a JSFiddle with your arrows coded and grouped using symbols:

<svg width="200" height="200" viewBox="0 0 200 200">
    <defs>
        <symbol id="sm_arrow" viewBox="0 0 20 10">
            <polygon points="10,0 20,10 10,5 0,10" />
        </symbol>
        <symbol id="lg_arrow" viewBox="0 0 200 200">
            <polygon points="0,10 10,10 10,0 20,20" />
        </symbol>
        <symbol id="triple_arrow" viewBox="0 5 200 10">
            <use xlink:href="#sm_arrow"/>
            <use xlink:href="#sm_arrow" transform="translate(0,20)" />
            <use xlink:href="#sm_arrow" transform="translate(0,40)" />
        </symbol>
        <symbol id="arrows" viewBox="0 0 200 200">
            <g id="small_arrows">
                <use xlink:href="#triple_arrow" transform="translate(0,-90)" />
                <use xlink:href="#triple_arrow" transform="translate(290,0) rotate(90)" />
                <use xlink:href="#triple_arrow" transform="translate(200,290) rotate(180)" />
                <use xlink:href="#triple_arrow" transform="translate(-90,200) rotate(-90)" />
            </g>
            <g id="long_arrows" transform="translate(60,60)">
                <use xlink:href="#lg_arrow" transform="translate(80,80)" />
                <use xlink:href="#lg_arrow" transform="translate(0,80) rotate(90)" />
                <use xlink:href="#lg_arrow" transform="rotate(180)" />
                <use xlink:href="#lg_arrow" transform="translate(80,0) rotate(-90)" />
            </g>
        </symbol>
        <g id="background">
            <rect width="200" height="200"/>
            <rect x="60" y="60" rx="5" ry="5" width="80" height="80"/>
            <ellipse cx="100" cy="100" rx="20" ry="40"/> 
        </g>
    </defs>

    <use xlink:href="#background"/>
    <use xlink:href="#arrows"/>
</svg>

The styles were transferred to a CSS block or file:

polygon {
    stroke-width: 1;
}
#triple_arrow use:nth-child(1) {
    fill:black;
    stroke:lime;
}
#triple_arrow use:nth-child(2) {
    fill: red;
    stroke: black;
}
#triple_arrow use:nth-child(3) {
    fill: lime;
    stroke: black;
}
#lg_arrow {
    fill:yellow;
    stroke:black;
}
#background rect:nth-child(1) {
    fill:grey;
}
#background rect:nth-child(2) {
    fill:black;
}
#background ellipse {
    fill:white;
}

html - SVG code efficiency - Stack Overflow

html xml svg performance
Rectangle 27 0

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation {
    -webkit-animation: html 1s ease-out forwards;
    animation: html 1s ease-out forwards;
}

.css .circle_animation {
    -webkit-animation: css 1s ease-out forwards;
    animation: css 1s ease-out forwards;
}

@-webkit-keyframes html {
  to {
    stroke-dashoffset: 80; /* 50% would be 220 (half the initial value specified above) */
  }
}

@keyframes html {
  to {
    stroke-dashoffset: 80;
  }
}

@-webkit-keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}

@keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}
<div class="item html">
    <h2>HTML</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
    </svg>
</div>

<div class="item css">
    <h2>CSS</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
     </g>
    </svg>
</div>

Looking good! Asked this question a pretty long time ago, but I'll accept it. Thanks for sharing.

What I don't understand is how you determine the percentage of 100? I don't understand how you would set to say 75% or 50%.

@JeremyMiller stroke-dasharray is used to define the 'pattern' a dashed line uses (MDN). By providing a single value you create a pattern with a dash of 440px and a space of 440px. (440px is roughly the circumference of the circle). stroke-dashoffset effectively moves the starting point of the dash pattern (MDN). A dash-offset of 220 (half of the stroke-dasharray) would produce a half-circle. 110 = quarter circle etc.

css - CSS3 simple donut chart - Stack Overflow

css css3 donut-chart
Rectangle 27 0

When using the lineto command, uppercase-L (L) specifies an absolute coordinate while lowercase-L (l) specifies a relative move. It seems like you wanted to use the relative command.

As far as an example, the pie-chart-like one on the W3 path's page uses a single path:

produces the red part in this image:

Note the liberal use of lowercase (relative) commands.

html - SVG Half Circle: Why is it rotated? - Stack Overflow

html svg