html – 类似指南针指针或Safari徽标内部的形状

发布时间：2020-12-31 08:44:12 所属栏目：资源来源：网络整理

导读：副标题#e# 我试图只使用CSS制作下面的形状.我知道使用图像或SVG实现这种形状会容易得多,但我正在尝试用CSS来实现它的概念验证. 以下是我到目前为止尝试过的代码.它通过使用transform：rotate(45deg)创建菱形,但是对角线的长度相同,而我需要的形状有一条非常

如果您偶然发现此页面正在寻找SVG实现,请查看以下代码段：

.separator {
    position: relative;
    width: 12px;
}
svg {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}
path {
    fill: url(#MyGradient);
}
path#shade {
    stroke: #2E2E2E;
    stroke-width: 3;
}

/* Just for the demo to style the divs and position */

body {
    background: #333;
    font-family: Calibri;
    font-size: 18px;
}
.container {
    display: flex;
}
.container > .content {
    flex: 1;
    flex-grow: 1;
    color: white;
    margin: 20px;
}

<div class='container'>
    <div class='content'>Some lengthy paragraph content which wraps around when it exceeds the width.Some lengthy paragraph content which wraps around when it exceeds the width.Some lengthy paragraph content which wraps around when it exceeds the width.</div>
    <div class='separator'>
        <svg viewBox='0 0 10 200' preserveAspectRatio='none'>
            <defs>
                <linearGradient id="MyGradient" x1=' 50% ' y1='0% ' x2='50% ' y2='100% '>
                    <stop offset="0%" stop-color="#333" />
                    <stop offset="100%" stop-color="#555" />
                </linearGradient>
            </defs>
            <path d='M0,100 5,0 10,100 z' id='shade' />
            <path d='M0,200 z ' />
        </svg>
    </div>
    <div class='content '>Some lengthy paragraph content which wraps around when it exceeds the width.Some lengthy paragraph content which wraps around when it exceeds the width.Some lengthy paragraph content which wraps around when it exceeds the width.</div>
</div>

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

3/3

首页