Question

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

首先，我想在canvas标签中，但我读到许多电子邮件客户端不支持canvas标签：https://www.campaignmonitor.com/blog/email-marketing/2013/08/support-for-html-5-elements-in-email/
所以，我想在svg标签中，但现在我意识到，为了计算百分比，我需要javascript来做，而邮件客户端也不支持javascript。

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

非常感谢你！

Answer 1

以下代码snnippet可能适合您

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>…</body> -->
<div class='circle'>
    <div class='arc'></div>
</div>

根据百分比填写圈子（邮寄模板）

1 个答案: