我正在尝试构建看起来像这样的波斯尼亚和黑塞哥维那国旗。CSS：旋转元素而不旋转其内容 - 单元素

我想实现的明星是如何一字排开。他们躺在45度的倾斜轴上，但星星本身不旋转。

以下是我正在尝试的最小代码，但它也旋转了星星。

有没有办法避免它？

P.S - 我不允许向DOM添加另一个元素。

.flag { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 

 
.flag::before { 
 
    position: absolute; 
 
    content: '★★★★★★★★★'; 
 
    color: black; 
 
    font-size: 3rem; 
 
    letter-spacing: 0.33rem; 
 
    transform: translateY(-50%) rotate(45deg); 
 
    top: 50%; 
 
}

<div class="flag"></div>

来源

2017-02-21 Praveen Puglia

我会建议使用每个明星作为一个单一的DOM元素，然后在一个div包裹它，旋转div和旋转回的只有明星。啊，对不起，没有看到你不能添加任何DOM元素。这很糟糕。如果我弄清楚什么，我会让你知道。 –

更好的主意：用text-shadow！基本的CSS：

div { 
 
    font-size: 5em; 
 
    text-shadow: .5em .5em, 1em 1em, 1.5em 1.5em, 2em 2em, 2.5em 2.5em, 3em 3em, 3.5em 3.5em, 4em 4em; 
 
}

<div>★</div>

原始想法

类的丑陋，但你可以把恒星之间的选项卡，然后用ch -valued font-size与tab-size玩， line-height。基本思路：

.star { 
 
\t font: 6.5ch/.5 monospace; 
 
\t tab-size: .75ch; 
 
}

<pre class='star'>★ 
 
\t ★ 
 
\t \t ★ 
 
\t \t \t ★ 
 
\t \t \t \t ★ 
 
\t \t \t \t \t ★ 
 
\t \t \t \t \t \t ★ 
 
\t \t \t \t \t \t \t ★ 
 
\t \t \t \t \t \t \t \t ★</pre>

`quick attempt at the actual flag`

注意，它似乎只在Chrome工作。 ☹

来源

2017-02-21 10:04:46 Ana

这将是一个解决方案，但有很多问题需要解决。我希望在css转换中有一些东西可以在本地执行。 :(我要去试试这个， –

.flag { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 200px; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.flag-star:before { 
 
    font-size: 3rem; 
 
    content:"★"; 
 
    display: inline-block; 
 
} 
 

 
.deg-1{ 
 
    transform: rotate(47deg); 
 
} 
 
.deg-2{ 
 
    transform: rotate(48deg); 
 
} 
 
.deg-3{ 
 
    transform: rotate(49deg); 
 
} 
 
.deg-4{ 
 
    transform: rotate(50deg); 
 
} 
 
.deg-5{ 
 
    transform: rotate(51deg); 
 
} 
 
.deg-6{ 
 
    transform: rotate(52deg); 
 
} 
 
.deg-7{ 
 
    transform: rotate(53deg); 
 
}

<div class="flag"> 
 
    <div class="flag-star deg-1"></div> 
 
    <div class="flag-star deg-2"></div> 
 
    <div class="flag-star deg-3"></div> 
 
    <div class="flag-star deg-4"></div> 
 
    <div class="flag-star deg-5"></div> 
 
    <div class="flag-star deg-6"></div> 
 
    <div class="flag-star deg-7"></div> 
 
</div>

来源

2017-02-21 09:16:29

我提到我不能在DOM中添加更多元素。 –

编辑：旋转.flag ::前两次45deg然后170deg。

.flag { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
.flag::before { 
 
    position: absolute; 
 
    content: '★★★★★★★★★'; 
 
    color: black; 
 
    font-size: 2rem; 
 
    letter-spacing: 0.33rem; 
 
    transform: translateY(-50%) rotate(45deg) rotate(170deg); 
 
    top: 50%; 
 
}

<div class="flag"></div>

来源

2017-02-21 10:43:13

这样做的是旋转整个标志，该标志应该保持原状......这是应该旋转的恒星阵列 –

@PraveenPuglia然后你必须旋转.flag：：前两次 –

令人惊叹的，你能解释它为什么起作用吗？我有一个猜测，但让我们看看是否是这样：D –

CSS：旋转元素而不旋转其内容 - 单元素

回答

原始想法

quick attempt at the actual flag

相关问题

`quick attempt at the actual flag`