【问题标题】:how create triangle using css [duplicate]如何使用css创建三角形[重复]
【发布时间】:2015-03-07 09:10:36
【问题描述】:

请任何人帮助我如何使用 css 创建下图。

    ________/\_______
   |                |
   |                |
   |                |
   |________________|

请帮助我如何使用 css 完成它。只有 div 应该使用。

【问题讨论】:

  • 你搜索过现有的问题吗?
  • 提示:border-style: solid dahsed
  • 我在问上面的三角形@diEcho
  • 做了一些minor changes之后。现在,您需要做的就是弄清楚如何将其与顶部对齐。
  • 这里还有一个:jsfiddle.net/pnmzsoLj/1

标签: css


【解决方案1】:

请看这里:http://jsfiddle.net/alexwcoleman/6ue8vvba/

.box {
    position: relative;
    border: 1px solid #000;
    height:100px;
    width:300px;
    margin-top:100px;
    background:#fff;
}
.box:after, .box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #fff;
    border-width: 30px;
    margin-left: -30px;
}
.box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #000;
    border-width: 31px;
    margin-left: -31px;
}

【讨论】:

    【解决方案2】:

    此代码用于创建三角形:

    HTML:
    <div id="talkbubble"></div>
    
    CSS:
    #talkbubble {
       width: 120px;
       height: 80px;
       background: red;
       position: relative;
        margin-top: 50px;
    }
    #talkbubble:before {
       content: "";
    position: absolute;
    right: 43%;
    bottom: 100%;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-bottom: 25px solid red;
    border-right: 11px solid transparent;
    }
    

    在这里查看演示:DEMO

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-04-06
      • 2021-04-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-07-23
      相关资源
      最近更新 更多