是否可以使用边界半径实现弯曲的圆形? [英] Is it possible to achieve a curved circle shape using border-radius?

查看:57
本文介绍了是否可以使用边界半径实现弯曲的圆形?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我不确定形状是什么.我假设这是一个弯曲的圆圈.下面是该示例的屏幕截图.

I am not sure what the shape is. I am assuming it's a curved circle. Below is a screenshot of the example.

我希望图像的形状像这样.但是尝试使用 border-radius 根本不起作用.有什么方法可以通过CSS实现这种形状?

I want an image to be shaped somewhat like this. But trying with border-radius isn't working at all. Is there any way to achieve this shape with CSS?

推荐答案

这是您的答案,您可以通过border-radius实现如果您想自定义它,请点击链接 https://9elements.github.io/fancy-border-radius/#34.28.22.33-- .

Here is your Answer and you can achieve it by border-radius if you want to customize it here is the link https://9elements.github.io/fancy-border-radius/#34.28.22.33--.

.border{
  height:250px;
  width:250px;
  border:2px solid black;
  border-radius:28% 72% 67% 33% / 34% 22% 78% 66%;
  background:yellow;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <div class="border"></div>
</body>
</html>

这篇关于是否可以使用边界半径实现弯曲的圆形?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆