CSS阴影框::后 arrox与边框方法

我试图用这个设计实现几个元素:

我试图用这个设计实现几个元素:

enter image description here

enter image description here

我也想有这样的边界半径:

enter image description here

我设法做了什么:

对于第一个 div,我没有设法为::before 箭头和::after 箭头的框阴影做内部框阴影

对于最后一个 div,我设法做到了,但是当我尝试更改箭头的大小以使其更大时,框阴影不再工作...

body {
  background-color: white;
}
.test{
  margin-top: -30px!important;
}
.test2{
  z-index:13;
}
.test3{
  z-index:12;
}
.test4{
  z-index:11;
}
.test5{
  z-index:10;
}
. {
  position: relative;
  margin: 3em;
  padding: 1em;
  box-sizing: border-box;
  background: white;
  box-shadow: 0px 3px 10px 0 black;
}
.::before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -0.5em;
    top: 0;
    left: 40%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 50px 0 50px;
    border-color: lightgrey transparent transparent transparent;
    //box-shadow: 0px 3px 10px 0 black;
  }
.::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -0.5em;
    bottom: -20px;
    left: 40%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 50px 0 50px;
    border-color: lightgrey transparent transparent transparent;
    //box-shadow: 0px 3px 10px 0 black;
  }
.toto::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -0.5em;
    bottom: -2em;
    left: 50%;
    box-sizing: border-box;
    
    border: 1em solid black;
    border-color: transparent transparent lightgrey lightgrey;
    
    transform-origin: 0 0;
    transform: rotate(-45deg);
    
    box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
  }
<div cl=" test2">Inner box shadow for before content not working</div>
<div cl=" test test3">box shadow for after content not working</div>
<div cl=" test test4">Content 3</div>
<div cl=" test test5">Content 4</div>
<div cl=" toto">Managed to do it but the arrow is not editable(I want to make it longer)</div>

任何人已经有这个问题或知道如何解决这个问题?

4

这适用于clip-path

.box {
  margin: 50px;
  height: 100px;
  position:relative;
  z-index:0;
  filter: drop-shadow(0 0 5px #000);
}
.box::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: #f2f2f2;
  clip-path: polygon(
   0 0,  
   calc(50% - 20px) 0, 50% 20px, calc(50% + 20px) 0, /* top arrow */
   100% 0, 
   100% calc(100% - 20px), 
   calc(50% - 20px) calc(100% - 20px), 50% 100%, calc(50% + 20px) calc(100% - 20px), /* bottom arrow */
   0 calc(100% - 20px));
}
<div cl="box"></div>

使用 CSS 变量,您可以轻松处理它:

.box {
  --w:40px; /* width of the arrow */
  --h:20px; /* height of the arrow */
  margin: 50px;
  height: 100px;
  padding:var(--h) 0;
  position:relative;
  z-index:0;
  filter: drop-shadow(0 0 5px #000);
}
.box::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: #f2f2f2;
  clip-path: polygon(
   0 0,  
   calc(50% - var(--w)/2) 0, 50% var(--h), calc(50% + var(--w)/2) 0, /* top arrow */
   100% 0, 
   100% calc(100% - var(--h)), 
   calc(50% - var(--w)/2) calc(100% - var(--h)), 50% 100%, calc(50% + var(--w)/2) calc(100% - var(--h)), /* bottom arrow */
   0 calc(100% - var(--h)));
}
<div cl="box"></div>
<div cl="box" style="--w:60px;"></div>
<div cl="box" style="--w:200px;--h:40px"></div>

要添加边框半径,您可以编辑如下:

.box {
  --w: 40px; /* width of the arrow */
  --h: 20px; /* height of the arrow */
  --r: 30px; /* radius */
  margin: 50px;
  height: 100px;
  padding: var(--h) 0;
  position: relative;
  z-index: 0;
  filter: drop-shadow(0 0 5px #000);
}
.box::before,
.box::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  background: #f2f2f2;
}
.box::before {
  top: 0;
  bottom: var(--h);
  border-radius: var(--r);
  clip-path: polygon( 0 0, calc(50% - var(--w)/2) 0, 50% var(--h), calc(50% + var(--w)/2) 0, 100% 0, 100% 100%, 0 100%);
}
.box::after {
  bottom: 0;
  height: var(--h);
  clip-path: polygon( 0 0, 100% 0, calc(50% - var(--w)/2) 0, 50% 100%, calc(50% + var(--w)/2) 0);
}
<div cl="box"></div>
<div cl="box" style="--w:60px;--r:20px"></div>
<div cl="box" style="--w:200px;--h:40px;--r:60px"></div>

CSS arrow shape with border-radius and shadow

3

您可以使用过滤器 / 阴影

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow

drop-shadow()CSS 函数对输入图像应用阴影效果,其结果为<filter-function>

可能的用途:

body {
  background-color: white;
}
.test {
  margin-top: -30px!important;
}
.test2 {
  z-index: 13;
}
.test3 {
  z-index: 12;
}
.test4 {
  z-index: 11;
}
.test5 {
  z-index: 10;
}
. {
  position: relative;
  margin: 3em;
  padding: 1em;
  box-sizing: border-box;
  background: white;
  filter: drop-shadow(0px 3px 10px black);
}
.::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin-left: -0.5em;
  bottom: -20px;
  left: 40%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 50px 0 50px;
  border-color: white transparent transparent transparent;
}
.toto::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin-left: -0.5em;
  bottom: -2em;
  left: 50%;
  box-sizing: border-box;
  border: 1em solid black;
  border-color: transparent transparent white white;
  transform-origin: 0 0;
  transform: rotate(-45deg);
}
<div cl=" test2">Inner box shadow for before content not working</div>
<div cl=" test test3">box shadow for after content not working</div>
<div cl=" test test4">Content 3</div>
<div cl=" test test5">Content 4</div>
<div cl=" toto">Managed to do it but the arrow is not editable(I want to make it longer)</div>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(138)
如何使CSS内容斜体和粗体
上一篇
我应该使用CSS或SVG来显示形状吗
下一篇

相关推荐

  • css设置滚动条宽度设置:This is a title

    CSS设置滚动条宽度的方法:使用CSS3的。-webkit-属性:…

    2023-06-06 10:53:01
    0 59 60
  • css 子样式:标题

    CSS 子样式是指在父样式的基础上,对其子元素进行单独定义的样式。它可以使用类选择器、ID 选择器或者属性选择器来定义,如下所示:…

    2023-04-13 14:42:51
    0 97 71
  • css 间隔:如何利用 CSS 进行间隔调整

    示例示例CSS 间隔是指在 CSS 中使用的间距属性,它可以用来设置元素之间的距离。有几种常用的 CSS 间隔属性,包括:…

    2023-06-05 02:47:09
    0 15 13
  • css导入字体:标题

    示例示例CSS导入字体可以通过@font-face规则来实现,代码示例如下:…

    2023-04-22 12:42:42
    0 25 41
  • css背景图片:Unlock the Power of Creative Backgrounds

    示例示例CSS背景图片是一种使用CSS样式来定义HTML元素的背景图像。它可以让你在网页中添加图片,而不需要使用标签。CSS背景图片的语法如下:…

    2023-04-27 07:58:21
    0 31 76
  • sci和cssci哪个高级一种新的科学出版标准

    SCI和CSSCI是两个学术期刊收录索引,它们都用于衡量学术期刊的发表质量。SCI(Science Index)是由美国科学信息研究所(ISI)提供的一种学术期刊收录索引,它收录了来自全球各地的学术期刊,并以引文索引的方式收录其中的文章。SCI的收录索引覆盖了超过8000种期刊,其中包括了许多国际一流期刊,如Nature、Science、Cell、PNAS等。…

    2023-05-14 11:16:30
    0 14 86
  • css文本垂直居中:标题

    CSS文本垂直居中的方法有很多,以下是其中常用的几种:使用 line-height 属性:…

    2023-05-09 10:53:27
    0 50 92
  • css选择第三个元素:Third Element

    CSS选择第三个元素的代码如下:上述代码中,element表示要选择的元素,nth-child()是CSS中的伪类,用于选择某个父元素的第n个子元素,圆括号中的数字表示第几个,上述代码表示选择第三个元素。…

    2023-04-12 07:21:21
    0 65 72

发表评论

登录 后才能评论

评论列表(37条)