首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何用css创建椭圆矩形?

如何用css创建椭圆矩形?
EN

Stack Overflow用户
提问于 2017-04-25 09:05:18
回答 1查看 262关注 0票数 1

我想创建一个带有css的椭圆形矩形。我知道我可以用边界半径做这件事,但我想做这样的事情:

有什么方法可以用纯css来做吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-04-25 09:21:28

如果有人需要的话。

代码语言:javascript
运行
复制
.oval-rectangle {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 150px;
  height: 150px;
  position: relative;
  margin: 20px 0;
  border: none;
  -webkit-border-radius: 50% / 10%;
  border-radius: 50% / 10%;
  text-align: center;
  text-indent: 0.1em;
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #1abc9c;
}

.oval-rectangle::before {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  position: absolute;
  content: "";
  top: 10%;
  right: -5%;
  bottom: 10%;
  left: -5%;
  border: none;
  -webkit-border-radius: 5% / 50%;
  border-radius: 5% / 50%;
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #1abc9c;
  text-shadow: none;
}
代码语言:javascript
运行
复制
<div class="oval-rectangle"></div>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43606170

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档