专业解梦 2016-10-10 08:10 采纳率: 20%
浏览 1353
已采纳

关于图形四个角css的问题

图片说明

类似这样的四个角用css怎么实现！谢谢

  • 写回答

4条回答 默认 最新

  • i01o 2016-10-10 09:02
    关注
     <html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
.cro{
width: 100px;
height: 100px;
border: 1px solid #58C4E6;
position: relative;
}
.cro_left_top,.cro_right_top,.cro_left_bottom,.cro_right_bottom{
position: absolute;
width: 20px;
height: 20px;
border: 1px solid #fff;
z-index: 1;
background: #fff;
}
.cro_left_top{
top: -1px;
left: -1px;
border-radius:0px 0px 20px 0px;
border-bottom: 1px solid #58C4E6;
border-right: 1px solid #58C4E6;
}
.cro_right_top{
top: -1px;
right: -1px;
border-radius:0px 0px 0px 20px;
border-bottom: 1px solid #58C4E6;
border-left: 1px solid #58C4E6;
}
.cro_left_bottom{
left: -1px;
bottom: -1px;
border-radius:0px 20px 0px 0px;
border-top: 1px solid #58C4E6;
border-right: 1px solid #58C4E6;
}
.cro_right_bottom{
right: -1px;
bottom: -1px;
border-radius:20px 0px 0px 0px;
border-top: 1px solid #58C4E6;
border-left: 1px solid #58C4E6;
}
</style>
</head>
<body>
<div class="cro">
<div class="cro_left_top"></div>
<div class="cro_right_top"></div>
<div class="cro_left_bottom"></div>
<div class="cro_right_bottom"></div>
</div>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

  • 一个关于#css#的问题 css 前端
    2023-03-25 21:56
    回答 2 已采纳 把f float 设置放到下边的 div 设置里
  • 问一个关于css的问题 css
    2022-02-26 13:09
    回答 2 已采纳 这是什么问题？
  • 关于CSS的一个入门小问题 css
    2022-01-17 14:40
    回答 5 已采纳 .error 和 input.error 两个对应的都是 input标签 .error 代表着类获取 当前标签指定样式input.error 代表着 是一个input标签并且当前标签上还要有类 .e
  • 使用css实现圆角图形绘制
    2020-09-25 00:15
    `会在元素的四个角落上创建10像素的圆角。尽管这种方法非常简单有效，但在某些复杂的布局或需要特定形状的圆角时，可能需要采用更复杂的技术来模拟圆角效果。 文章中提到的是一种利用多个`span`标签和CSS的`...
  • 关于css样式渲染问题 css
    2022-04-21 19:03
    回答 4 已采纳 好吧，目前这个问题是因为我使用的/deep/成了向上深度查询
  • css盒子布局浏览器的4个角落 css html 前端
    2022-10-07 17:27
    回答 2 已采纳 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l
  • 问一个问题，关于css的格式 css idea java
    2022-03-25 09:39
    回答 3 已采纳 这个正常，你用的是什么编辑器，可以整理代码格式的
  • css绘制透明三角形
    2020-09-24 22:46
    具体来说，当我们设置一个元素的宽度和高度为0，并为其设置四个边框时，如果某些边框颜色透明而其他边框颜色不透明，那么不透明的边框会显示出尖角的形状，形成一个三角形。 为了实现透明三角形，我们可以使用CSS的...
  • CSS中关于li的一个复合问题 css 有问必答
    2021-11-16 14:59
    回答 2 已采纳 用 li:hover和 .li:nth-child来写。
  • 关于CSS卡片布局的问题 css css3 前端
    2022-04-01 23:35
    回答 2 已采纳 宽度给百分比就可以了
  • 关于前端css的设置问题 css html
    2023-01-05 10:19
    回答 2 已采纳 你如果只用css实现的话，划过的时候给个背景图不就行了
  • CSS border三角、圆角图形生成技术详解
    2020-09-25 11:27
    具体做法是将元素的边框四个角分别设置为白色边框，通过与背景色的融合来隐藏不需要显示的部分，从而模拟出圆角效果。为了确保兼容性，尤其是针对IE6浏览器，可以通过使用不同的边框样式来避免透明属性的问题。 ...
  • 使用css3绘制出各种几何图形
    2020-09-27 22:16
    这是由于边框半径设置为宽度或高度的一半时，正方形的四个角都会变得圆润，从而形成一个圆形。 2. **自适应椭圆** 如果将边框半径设置为百分比值，元素会变成一个自适应的椭圆。例如，`border-radius: 50%;`将使...
  • css如何绘制特殊图形的方法示例
    2020-09-22 11:12
    1. 梯形：在绘制梯形时，可通过设置div的宽度和高度，以及四个方向的边框样式和颜色来实现。通过调整宽度和高度，可形成不同的梯形效果。 示例代码如下： ```css .trapezoid { width: 300px; height: 0; border-...
  • 解决纯css写三角形在firefox下的锯齿问题
    2020-09-24 23:14
    这种锯齿问题通常与浏览器对CSS图形渲染的能力有关。在不同的浏览器中，同样的CSS代码可能会有不同的渲染结果。Firefox可能在某些CSS图形的渲染上不如其他浏览器精细，导致了锯齿现象。解决这类问题，除了调整边框...
  • 没有解决我的问题, 去提问

悬赏问题

  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化
  • ¥15 Mirare PLUS 进行密钥认证？（详解）
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证
  • ¥20 想用ollama做一个自己的AI数据库
  • ¥15 关于qualoth编辑及缝合服装领子的问题解决方案探寻
  • ¥15 请问怎么才能复现这样的图呀