时间戳

首页 > 解决方案 > 如何在 Css 中创建 Whatsapp 形状的边框属性？

html - 如何在 Css 中创建 Whatsapp 形状的边框属性？

问题描述

这就是我想要做的我正在尝试制作一个发光的 WHATS-APP 图标.. 为此我需要在 CSS 的边框中制作精确的图标形状。但我不知道该怎么做。

到目前为止，我一直在尝试关注.. 它适用于 Facebook、Instagram 徽标，但不适用于 Whats-app。这是 SVG 的 HTML：

 <button class="btn">
                    <li class="li3">
                        <a href="http://wa.me/+917226072534" target="_blank">
                            <svg class="svg3" xmlns="http://www.w3.org/2000/svg" width="40" height="40"
                                fill="currentColor" color="rgb(0, 190, 0)" class="bi bi-whatsapp" viewBox="0 0 16 16">
                            </svg>
                        </a>
                    </li>
                </button>

这是我的边框CSS：

.svg3 {
    border: 2px solid green;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: ;
}

这是我的悬停CSS：

.li3 a :hover {
    color: rgb(150, 255, 0, 1);
    box-shadow: 0px 10px 30px 0px rgb(200, 255, 0, 0.8);
    transition: all 0.2s ease 0s;
}

编辑：请帮助ppppp

标签： htmlcsssvgiconsborder

解决方案

我刚刚创建了一个代码笔，您可以在其中看到结果（不是那么漂亮）

这是html：

<div class="logo"></div>

这是CSS：

div.logo {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: #131313;
  border: 1rem solid green;
  border-radius: 50%;
}

div.logo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: #131313;
  border-left: .9rem solid green;
  border-bottom: .9rem solid green;
  transform: translate(-25%, 25%) skew(-25deg) rotate(-10deg);
}

然而这不是最好的方法，标志通常是 svgs 或图像，用纯 html 和 css 设计标志不是一个好习惯，如果你只是想给标志一个发光的效果，你应该创建一个 gif（不是最佳）或创建一个svg，然后将样式赋予该svg。构建 svg 的方法有很多种（例如，Canva 就可以这样做，您不必编写所有路径，只需创建项目并将其导出为 svg）。希望对您有所帮助。

编辑：我误解并认为您想在 html 和 css 中复制 whatsapp 徽标，对此感到抱歉（-_-）。如果您只想为具有透明背景的方形图像添加阴影，则可以使用 css 规则：

    filter: drop-shadow(/* properties */);

仅将阴影添加到图像（徽标）的内容而不是整个图像

推荐阅读