草庐IT

CSS画三角形，圆形，椭圆，圆角长方形

甜酒1996 2023-03-28 原文

1、CSS画一个三角形：（div宽高为0，border存在且颜色不一）

step1:   设置宽度，高度为 0 的一个div盒子；

step2:   为了方便理解，将盒子的 4 个边框分别设置一样的宽度boder，不同的颜色；

step3:   transparent将其他三个 边框隐藏掉，就能看到效果了。

 如果对三角形的样式有特殊要求： 可以通过动画效果来实现: transform : rotate(80deg) 通过旋转实现

2、圆形，椭圆，圆角长方形：

   通过改变 border-radius的比例，可以显示不同的图形，比如圆角正方形、圆角长方形 

3、效果图：

 

 

 

 4、代码：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
     body { 
         display: flex;
            
        }
        div {
     margin: 50px 50px;
        }
        .step0 {     
            width: 100px;
            height: 100px;
            border-top: solid 20px pink ;
            border-right: solid 20px rgb(118, 118, 5);
            border-bottom: solid 20px green;
            border-left: solid 20px blue;
           
        }

        .step1 {
            width: 0px;
            height: 0px;
            border-top: solid 50px pink ;
            border-right: solid 50px rgb(112, 112, 18);
            border-bottom: solid 50px green;
            border-left: solid 50px blue;
            
        }
        .triangle {
            width: 0px;
            height: 0px;
            border-top: solid 50px   transparent;
            border-right: solid 50px rgb(112, 112, 18);
            border-bottom: solid 50px  transparent;
            border-left: solid 50px  transparent;
            /* 旋转 */
            transform: rotate(80deg);

        }
        /* 画一个圆 */
        .circle{
            width: 100px;
            height: 100px;
            background-color: rgb(21, 138, 216);
            border-radius: 50%;
        }
        /* 画一个椭圆 */
        .ellipse{
            width: 200px;
            height: 100px;
            background-color: rgb(21, 138, 216);
            border-radius: 50%;
        }
        /* 通过改变 border-radius的比例，可以显示不同的图形，比如圆角正方形、圆角长方形 */
     
    </style>
    </head>

    <body>
        <div class="step0">
            有边框的div
        </div>
        <div class="step1">
        </div>
        <div class="triangle">
        </div>
        <div class="circle">
        </div>
        <div class="ellipse">
        </div>
    </body>

</html>
长方圆形spancolorrgbaHtml/Css

有关CSS画三角形，圆形，椭圆，圆角长方形的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  3. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  4. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  5. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  6. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

  7. css - Jekyll 和自定义 CSS - 2

    有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？ 最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,

  8. css - 检测到 Sass 更改但 style.css 仅在我保存时每 5 到 7 次被覆盖 - 2

    我在一台Windows764位机器上使用Sass和Ruby(最新版本)，我正在我的家庭服务器上处理一个共享文件夹。(但是，我不得不承认问题本身也出现在服务器上，因为我试图安装Ruby并直接-watch服务器上的文件)。问题如下:如果我第一次保存，检测到变化，我的style.css被直接覆盖。之后，我总是需要保存多达7次才能覆盖style.css。每次都会检测到更改，但不会编译任何内容。这是一个屏幕:>>>Sassiswatchingforchanges.PressCtrl-Ctostop.overwritestyle.css>>>Changedetectedto:E:/Websites

  9. ruby - 用于 CSS3 跨浏览器兼容性的 SASS 插件？ - 2

    是否有一个SASS扩展可以采用SASS样式表，找到中性属性(例如border-radius)并为其输出所有特定于供应商的属性(例如-webkit-border-radius等)自动？我真的不想手动创建所有混入，也不想手动编写代码。我确定一定有这样的扩展名，但我找不到它。帮忙？ 最佳答案 有一个非常好的gem可以满足您的需求。它叫做Bourbon它不会用特定于供应商的css替换您的css，因为它可以像SASS一样工作。它基本上是一个正确生成跨浏览器css的mixin集合。 关于ruby-用

  10. ruby-on-rails - 是否有一个库可以自动进行 CSS spriting？ - 2

    CSSSpriting确实可以提高性能，但它并不是最容易阅读和维护的东西。是否有任何工具可以让我单独对图像进行编码，然后将它们聚合起来并用正确的蒙太奇子集替换HTML？我特别考虑RubyonRails插件，但如果有其他语言的包，我很乐意移植它。 最佳答案 SmartSprites试一试。 关于ruby-on-rails-是否有一个库可以自动进行CSSspriting？，我们在StackOverflow上找到一个类似的问题： https://stackoverf

随机推荐