Question

我是CSS的新手，我想复制this image，其中有两个带有两个颜色的图形，里面也有一个文本

我正在使用一个名为Spectre.css的框架作为网格，我在html文件中完成了以下操作：

   <div class="container pt-50">
    <div class="columns">
        <div class="col-md-10 col-mx-auto">
            <p class="text-center pt-10 pb-10 pl-40 pr-40 grad rounded">Lorem ipsum</p>
        </div>
    </div>
</div>

这是我的CSS：

.pt-10{ padding-top: 10px;}
.pb-10{ padding-bottom: 10px;}
.pl-10{ padding-left: 40px;}
.pr-40{ padding-right: 40px; }

.grad {
background-image: linear-gradient(-90deg, #FACE84,#D47465); 
}

.rounded{
border-radius: 25px;
}

我得到了this

您可以看到我做了一个渐变，但是我不知道该怎么做才能得到我提到的数字

感谢您能给我的帮助

Answer 1

我建议您阅读附件中的链接。它引导您完成如何制作与此类似的阴阳。希望这会有所帮助。

https://css-tricks.com/creating-yin-yang-loaders-web/

文字css中的两个数字

1 个答案: