收藏
回答

css样式怎么实现矩形中一条边往里面凸进去情况?

我想实现的红色线那种情况,而不是想绿色那样子进行填充

回答关注问题邀请回答
收藏

2 个回答

  • 啊哈
    啊哈
    01-18

    1、可以用一个纯色弧形元素覆盖上去;

    2、用css的clip-path属性去实现:

      width: 300px;
      height: 180px;
      clip-path: path("M0 0 L0 180 C80 140 220 140 300 180 L300 0 Z");
      background-color: green;
    
    01-18
    有用 1
    回复 5
    • Stay.
      Stay.
      01-18
      我采用了第二种方法发现我的效果是这样子的
      01-18
      回复
    • 啊哈
      啊哈
      01-18回复Stay.
      只是提供一个思路哈,具体的尺寸、位置参数需要自己修改。可以去查一下clip-path相关文档
      01-18
      回复
    • 神经蛙
      神经蛙
      01-18
      有那种突出来的效果吗,我的背景是一张图片我想让图片像半圆弧形那种突出来而且宽度跟屏幕一样宽就行
      01-18
      回复
    • 啊哈
      啊哈
      01-18回复神经蛙
      额,不就是题主这个样式么?用border-radius实现就可以了
      01-18
      回复
    • 神经蛙
      神经蛙
      01-18回复啊哈
      没法,比你这个更复杂点,用border-radius这个实现不了,算了我再去问问其他的
      01-18
      回复
  • 启年
    启年
    01-18

    往里凹进去不好做,可以做一个突出的图,然后盖上去...

    01-18
    有用
    回复 2
    • Stay.
      Stay.
      01-18
      这种方法试过了,如果进行覆盖的话,我里面那个黑色的圆圈会移动到别的地方去了
      01-18
      回复
    • 启年
      启年
      01-18回复Stay.
      考验你css的时候到了,可以实现的。
      01-18
      回复
登录 后发表内容