css带三角形的对话框

原理：before伪元素创建个小正方形，旋转45度角。颜色使用inherit。这样更改颜色的话只需要更改一处就行了。

<style type="text/css">html,body{padding: 0;margin:0;}.box{width: 20rem;height: 8rem;border-radius: 1rem;border:1px solid #dd9717;background: pink;margin-top: 10rem;box-sizing: border-box;position: relative;}.box::before{content:'';position: absolute;left: 2rem;top:-1.05rem;padding: 1rem;border:inherit;border-right: 0;border-bottom: 0;border-radius: 0.2rem;background:inherit;transform: rotate(45deg);}
</style>
<body>
<div class='box'></div>
</body>
复制代码

转载于:https://juejin.im/post/5cd384286fb9a032401911e1

css带三角形的对话框相关推荐

实现带三角形button按钮附带边框——html,css
实现带三角形button按钮附带边框--html,css 通过使用HTML+CSS实现带边框的三角形按钮样式先看看效果实现原理: 使用两个三角形,通过叠加,进而实现边框. 两个三角形重叠,下面的三 ...
css做三角形横线加小三角,CSS创建三角形（小三角）的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
CSS实现三角形的四种方法
方法一:使用 border (常见) [解释]不设置宽高,用边框大小控制三角型大小 [分解步骤] 设置一个div不设宽高 [示例] <style>#triangle{width: 0;he ...
css画三角形(怎么用css画三角形)
如何用css3画一个有边框的三角形如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. ...
纯Css实现三角形、气泡框的三角形
纯Css实现三角形上下左右箭头左上.左下.右上.右下箭头气泡框的三角形上下左右箭头效果图片 HTML <div class="tri ...
css镂空三角形样式
前言对话框----镂空三角形样式原理 1)利用伪元素 :before :after 2):before ,border做出大三角形样式 3):after,border做出小三角形样式 4)小三角形 ...
CSS实现三角形（详细）
三角形的广泛应用网页设计中我们常常能见到各类三角形,比如二级菜单,下拉列表,三角形作为一个简单的图标能够清晰明了的表明页面的模块和功能.在具体的页面设计过程中可以直接使用背景图片实现,也可以通过CS ...
css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
纯 CSS 实现三角形尖角箭头的实例
为什么80%的码农都做不了架构师?>>> 上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/ ...
06. 用css实现三角形
用css实现三角形 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

css带三角形的对话框

css带三角形的对话框相关推荐

最新文章

热门文章