CSS3 如何实现菱形

html-css030

CSS3 如何实现菱形,第1张

可以画两个等腰三角形,等腰三角形代码#ID {

width: 0

height: 0

border-left: 50px solid transparent

border-right: 50px solid transparent

border-bottom: 100px solid red}

用css实现:

<style>

    .diamond{

        display: inline-block

        width: 14px

        height: 14px

        border: 2px solid blue

        transform: rotate(45deg)

    }

</style>

<div class="diamond"></div>

用svg实现:

<svg viewBox="0 0 100 100" width="20" height="20">

    <polygon points="10 50, 50 10, 90 50, 50 90" fill="none" stroke="blue" stroke-width="10" />

</svg>