-
本版专家分：48结帖率 87.23%
-
- 签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
-
-
这样的效果应该如何实现呢？（要求不能直接用图片）
展开阅读全文
-
本版专家分：296
-
- 签到达人 累计签到获取，不积跬步，无以至千里，继续坚持！
-
- GitHub 绑定GitHub第三方账户获取
-
-
<div class="content"></div>
.content {
position: relative;
border: 2px solid red;
width: 200px;
height: 100px;
overflow: hidden;
border-top: none;
}
.content::before {
content: "";
position: absolute;
width: 100px;
left: 50px;
height: 50px;
border-radius: 60%;
border: 2px solid red;
top: -30px;
background-color: white;
z-index: 2;
}
.content::after {
content: "";
position: absolute;
width: 100%;
top: 0;
border:2px solid red;
z-index: 1;
}
-
本版专家分：48
-
- 签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
-
-
箭头处的弧形没有处理到啊
-
本版专家分：3436
-
- 签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
-
- GitHub 绑定GitHub第三方账户获取
-
- 红花 2019年7月 扩充话题大版内专家分月排行榜第一
-
-
黄花
2020年5月 Web 开发大版内专家分月排行榜第二
2019年7月 Web 开发大版内专家分月排行榜第二
-
-
body {
background-image: url('image/16e121fdec95660f.jpg');
}
.square, .square > div {
box-sizing: border-box;
}
.square {
width: 300px;
position: fixed;
top: calc(50vh - 200px);
left: calc(50vw - 150px);
overflow: hidden;
}
.square > .s-top {
border: 1px solid #fff;
height: 170px;
border-radius: 5px 5px 0 0;
border-width: 1px 1px 0 1px;
}
.square > .s-middle {
border-left: 1px solid #fff;
height: 60px;
}
.square > .s-bottom {
border: 1px solid #fff;
height: 170px;
border-radius: 0 0 5px 5px;
border-width: 0px 1px 1px 1px;
}
.square > .s-half-circle {
border: 1px solid #fff;
position: absolute;
width: 30px;
height: 60px;
border-width: 1px 0px 1px 1px;
border-radius: 30px 0 0 30px;
top: calc(50% - 30px);
right: 0;
}
.square > .s-background {
border: 360px solid rgba(255,255,255,0.3);
position: absolute;
width: 780px;
height: 780px;
border-radius: 50%;
top: calc(50% - 390px);
right: -390px;
}
.circle {
width: 50px;
height: 50px;
border: 1px solid #fff;
border-radius: 50%;
position: absolute;
top: calc(50% - 25px);
left: calc(50% + 125px);
background-color: rgba(255,255,255,.3);
box-sizing: border-box;
}
<div class="square">
<div class="s-top"></div>
<div class="s-middle"></div>
<div class="s-bottom"></div>
<div class="s-half-circle"></div>
<div class="s-background"></div>
</div>
<div class="circle"></div>
-
本版专家分：158673
-
- 签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
-
- GitHub 绑定GitHub第三方账户获取
-
-
进士
2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
-
- 银牌 2019年1月 总版技术专家分月排行榜第二
-
-
canvas或svg绘图很简单的
-
本版专家分：48
-
- 签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
-
-
就是不会画，所以才想用css实现。结果箭头的位置不会处理
-
本版专家分：48
-
- 签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
-
-
这样的效果我会，主要是我图片箭头部分不会处理
-
本版专家分：158673
-
- 签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
-
- GitHub 绑定GitHub第三方账户获取
-
-
进士
2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
-
- 银牌 2019年1月 总版技术专家分月排行榜第二
-
-
这种图形用css实现岂不是更麻烦。
-
本版专家分：48
-
- 签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
-
-
这不是没有办法了嘛
-
本版专家分：158673
-
- 签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
-
- GitHub 绑定GitHub第三方账户获取
-
-
进士
2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
-
- 银牌 2019年1月 总版技术专家分月排行榜第二
-
-
<canvas id="canvasId" width="500" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(400,2);
ctx.lineTo(498,2);
ctx.lineTo(498,198);
ctx.lineTo(2,198);
ctx.lineTo(2,2);
ctx.lineTo(100,2);
ctx.bezierCurveTo(150,2,150,100,250,100);
ctx.bezierCurveTo(350,100,350,2,400,2);
ctx.closePath();
ctx.stroke();
</script>
- 30行代码就可以实现看图识字！python使用tensorflow.keras搭建简单神经网络
大概几个月前，神经网络、人工智能等概念在我心里仍...Tensorflow2中内置了Keras库，Keras是一个由Python编写的开源人工神经网络库，可以作为Tensorflow、Microsoft-CNTK和Theano的高阶应用程序接口，进行深度学习模...
- 教你用PyTorch实现“看图说话”（附代码、学习资源）
作者：FAIZAN SHAIKH翻译：和中华校对：白静本文共2200字，建议阅读10分钟。本文用浅显易懂的方式解释了什么是“看图说话”(Image Captioning)...
- 原生JS实现VR看图特效
现在很多看车或是看房的网站都有VR看图的效果，看起来比较高端，类似于下面这样的效果： 那么这种效果是如何实现的呢？其实原理很简单，就是连续拍射了多个角度的图片，然后根据用户的操作加载不同角度的图片。...
- 实战 | 一行命令实现看图说话（Google的im2txt模型）
一行命令实现看图说话|Google的im2txt模型 1.项目介绍 这次给大家介绍一个google的深度学习模型im2txt，这个模型的作用跟它的名字一样，image-to-text，把图像转为文字，也就是图片描述。 这个模型是使用 2015 MS...
- Python3下用tkinter和PIL实现简单的看图工具
需求想做看图工具的，必然要支持jpg、png等常见格式，但tkinter是个纯粹的GUI库，不像GTK、QT那样大而全，所以只支持gif和ppm两种格式，局限很大，必须搭配图像处理库，才能实现基本的看图功能 在python生态系统里...
- 用python的tkinter库制作仿windows看图器
最近在学习python，就用python自己写了一个仿windows的看图器，在网上搜发现找不到相关的代码，所以决定自己尝试做了一个。看图器要实现如下功能： 打开文件夹，找到相应文件 图片可以进行等比例缩放 可以浏览同...
- 朋友圈一个简单的看图功能
我想的是在一个页面里边使用一个ImageView就可以了，如果需要实现左右滑动的功能就监听一下滑动监听事件。嗯嗯，既然这么想了那就去做吧！ 首先在页面中添加一个Imageview，然后监听屏幕的滑动事件（代码比较简单，...
- 前端--canvas实现漂亮的下雨效果
说明 这篇文章说如何用canvas画出漂亮的下雨效果，先看看最后实现的效果吧。 效果图 解释 看图来分析下，我们需要实现哪些效果。...好的，我们把整个效果大致拆分成三个效果，实现这三个效果，...
- RecyclerView实现Item滑动加载进入动画效果
如果是使用ListView的话我们知道，可以很简单的实现加载的动画，但是使用android.support.v7.widget.RecyclerView 的话，暂时还不是很多，所以自己就实现了一个效果，先看图吧（第一次上传动态图片，不喜勿喷哦） ...
- canvas实现漂亮的下雨效果
说明 这篇文章说如何用canvas画出漂亮的下雨效果，先看看最后实现的效果吧。 效果图 解释 ...看图来分析下，我们需要实现哪些效果。...好的，我们把整个效果大致拆分成三个效果，实现这三个...
- Android工具箱（一）：3D ViewPager
好久没有更新博客了，积攒了很多UI效果...今天要实现的一个效果是一个有科技感的3D ViewPager，看图：实现这个效果主要分两个部分：一. 无限循环ViewPager这个网上一搜一大把，无非就是下面两种实现方式： 使得adapter
- Andoird看图猜成语的小游戏
最近没什么事情，在微信上看见看图猜成语的游戏，于是自己也写了一个来玩。 先来看下效果图 Gif的画质就将就这样吧 我们先来分析一下 我们主要的就是这3个地方 1、就是一个imageview 2、我们用动态的方式添加多...
- 图片之间的过渡效果用fireworks怎么实现？
就是一个图里有2张不同的图片。如果直接组合在一起，中间会有一条线。有什么办法能实现图片上的那种效果吗？网上有现成的教材也可以。 ps那个软件也可。 这个很简单，在fireworks中先将一张图做背景，选上面...
- 简单说 用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的，这次我们来一起用CSS实现一个魔方旋转的特效，先来看看效果图！ 解释我们要做这样的效果，重点在于怎么把6张图片，摆放成魔方的样子，而把它们摆放成魔方的样子，重点在于用好CSS的...
- JavaScript简易计算器制作
在动手之前，我们要先理清思路，看图，若想实现这样一个简易的计算器，我们需要两个输入框用来存放我们需要进行运算的两个值，一个下拉框来选择要进行什么运算，一个按钮来实现开始运算，一个输入框来保存我们计算后...
- Unity 3D用简单的Cube、Sphere实现镜面/哈哈镜效果，只需十几秒哦！
Unity 3D用简单的Cube、Sphere实现镜面/哈哈镜效果，只需十几秒哦！ Unity实现镜面和哈哈镜效果，本文提供全流程，中文翻译。 助力快速用 Cube 和 Sphere 完成镜面效果 由于制作过程过于简单 本教程仅用 Unity 提供...
- 安卓自定义View----且看如何巧妙地实现一个类似于电视遥控板的环形按钮效果（上）
本文力求用最简单的方式实现这样的一个效果，并辅以详细的文字说明。 老规矩，先看图： 一个点餐界面，6种菜品，意味着6个按钮，点击‘开始点餐’ 幕布上升效果，这个动画下篇再讲。这篇的重点是这个样式的布局...