纯CSS徽标：Netflix
#css #网络开发人员 #初学者 #netflix

嘿，希望你一切都好！

我们只能通过练习来学习CSS。 CSS是您应该定期作为网络开发人员练习的东西。因此，要以高级方式学习CSS，我们将制作不同的公司徽标。所以，让我们开始我们的第一个。

Netflix徽标

使用纯CSS

的Netflix徽标

步骤1：html 

<div class="netflix"></div>

在html中，我们只有一个与netflix类的div。现在，让我们使用CSS样式。

步骤2：CSS

基本页面样式：

body {
  display: grid;
  place-items: center;
  background: black;
  min-height: 100vh;
}

造型主徽标：

.netflix {
  height: 15rem;
  width: 3rem;
  border-left: 3rem solid #e50914;
  border-right: 3rem solid #e50914;
  position: relative;
}
.netflix:before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: #e50914;
  transform: skewX(21.5deg);
  box-shadow: 0 0 30px black;
}
.netflix:after {
  content: "";
  width: 15rem;
  height: 2rem;
  background: black;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: -200%;
  top: 98%;
}

您可以参考以下Codepen进行预览：

所以，就是这样。感谢您阅读ð

不要忘记喜欢并跟随更多

instagram：coding_dev_

支持：coding_dev_