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

栏目: CSS · 发布时间: 5年前

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

我使用border-radius属性来实现圆角.但我不知道如何获得这种形状的圆角.我尝试从两侧给出相同的尺寸,但他们只是没有给我确切的形状.我在这里错过了一些 CSS3

属性.

只是想知道剪辑css属性是否是答案.

更新：

演示

#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>

这应该产生：

通过创建一个正方形,使用CSS变换旋转它,使角变圆并用外盒剪切它来实现效果.内部元件可以根据需要进行调整,因此有些灵活.

http://css3shapes.com/ 有一些很好的例子(注意页面底部的心脏)

备择方案

SVG图像支持这种类型的形状,并且在所有现代浏览器中都受支持.简单的SVG可以手动编码为XML,并且有各种免费/付费编辑器可以使用它们.

另见： Raphaël, a library for working with vector graphics on the web

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

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

查看所有标签

猜你喜欢:

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

码农书籍

Java语言程序设计（基础篇原书第10版）

[美]粱勇（Y.Daniel Liang） / 戴开宇 / 机械工业出版社 / 2015-7 / 85.00元

《Java语言程序设计（基础篇原书第10版）》是Java语言的经典教材，中文版分为基础篇和进阶篇，主要介绍程序设计基础、面向对象编程、GUI程序设计、数据结构和算法、高级Java程序设计等内容。本书以示例讲解解决问题的技巧，提供大量的程序清单，每章配有大量复习题和编程练习题，帮助读者掌握编程技术，并应用所学技术解决实际应用开发中遇到的问题。您手中的这本是其中的基础篇，主要介绍了基本程序设计、语法......一起来看看《Java语言程序设计（基础篇原书第10版）》这本书的介绍吧!

码农工具