1

我正在准备一个自定义邮件，通过 php，我需要准备四个自定义圆圈，根据一些百分比填充（我收到它们动态），所以我需要一些 html 标签来做到这一点：

  1. 首先，我想到了 canvas 标签，但我读到很多电子邮件客户端不支持 canvas 标签：https ://www.campaignmonitor.com/blog/email-marketing/2013/08/support-for-html-电子邮件中的 5 个元素/

  2. 所以，我想在 svg 标签中，但现在我意识到，为了计算百分比，我需要 javascript 来做，而且邮件客户端也不支持 javascript。

所以，我知道我不能对邮件模板这样做，对吧？

非常感谢你！

4

1 回答 1

0

以下代码片段可能对您有用

CSS

/**
 * HTML5 / CSS3 Circle with Partial Border
 * http://stackoverflow.com/q/13059190/1397351
 */
* { margin: 0; padding: 0; }
.circle {
    position: relative;
    margin: 7em auto;
    width: 16em; height: 16em;
    border-radius: 50%;
    background: lightblue;
}
.arc {
    overflow: hidden;
    position: absolute;
    top: -1em; right: 50%; bottom: 50%; left: -1em;
    transform-origin: 100% 100%;
    transform: rotate(45deg) skewX(30deg);
}
.arc:before {
    box-sizing: border-box;
    display: block;
    border: solid 1em navy;
    width: 200%; height: 200%;
    border-radius: 50%;
    transform: skewX(-30deg);
    content: '';
}

HTML

<!-- content to be placed inside <body>…&lt;/body> -->
<div class='circle'>
    <div class='arc'></div>
</div>
于 2015-10-27T04:42:56.367 回答