html – 如何使用border-radius在CSS3中创建三角形

内容简介：翻译自：https://stackoverflow.com/questions/12041938/how-to-create-a-triangle-in-css3-using-border-radius

#player {
  margin: 32px;
  position: relative;
  width: 400px;
  height: 250px;
  background-color: #222;
}

#inner {
  transform: rotate(45deg);
  background-color: silver;
  width: 100px;
  height: 100px;
  top: 20px;
  left: -50px;
  position: relative;
  border-radius: 20px;
}

#outer {
  position: absolute;
  top: 50px;
  left: 165px;
  width: 70px;
  height: 140px;
  overflow: hidden;
}

<div id="player">
  <div id="outer">
    <div id="inner"></div>
  </div>
</div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

关注我们，获取更多IT资讯^_^

查看所有标签

• CSS三角形和饼图
• go gl 彩色的三角形
• 【Leetcode】120.三角形最小路径和
• 【WPF】用三角形网格构建三维图形
• 音视频之opengl绘制三角形
• C++数字三角形问题与DP算法

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。