如下图效果:
html代码:
<p class="note">The
<code >
type
</code> attribute of the
<code>
source
</code>
element allows the user agent to avoid downloading resources that use formats it cannot render.
</p>
css设置:
.note {
position: relative;
color: green;
background: #DDFFDD;
font-style: italic;
margin-left: 2em;
padding-left: 2em;
}<pre name="code" class="css">.note::before {
content: 'Note';
background: green;
color: white;
padding: 0.15em 0.25em;
font-style: normal;
position: absolute;
top: -0.2em;
left: -1.5em;
transform: rotate(-5deg);
}
transform: rotate3d (1, -1, 0, 60deg);