css八边形

已于 2023-09-19 12:01:29 修改
阅读量178 收藏
点赞数
分类专栏： uniapp 文章标签： css 前端
于 2023-09-19 12:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xsw233/article/details/133021704
版权 
.babian {
	overflow: hidden;
	border-radius: 80rpx;
	transform: rotate(-20deg);
	.img-box{
		left: 0;
		top: 0;
		width: 240rpx;
		height: 240rpx;
		image{
			width: 240rpx;
			height: 240rpx;
			background-color: $my-main-color;
			border-radius: 40rpx;
			transform: rotateZ(-40deg);
		}
	}
}
<view class="u-flex u-row-center">
			<view class="babian">
				<view class="img-box">
					<image src="/static/1.jpg" class="" mode=""></image>
				</view>
			</view>
		</view>

css八边形

xsw233
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 多边形边框(八边形)
Tessa_zzl的博客
07-14 4077
<div className="block"> <div className="center"></div> </div> .block { box-sizing: border-box; position: relative; width: 400px; height: 45px; overflow: hidden; .center { box-sizing: border-box; position: .
2020-10-22 css画八边形等
李墨瞳的博客
10-22 1038
使用属性cli-path。 直接上代码：需要li变成八边形，类似这种： HTML： <ul> <li v-for="(item,index) in designWords" :key="index" :class="{active2:index == nowIndex1}" @click="tabsChange1(index)"> {{item}} </li>
css3clip-path绘制正八边形
Elephant_H的博客
08-16 3940
做微信H5项目，不可避免的要碰到使用用户头像的情况，而设计师为(cong)了(bu)追(kao)求(lv)美(qian)观(duan)也总是会出一些五花八门的头像框设计稿。虽然我觉得圆形就挺好看的。。。 此次项目中有一个排行榜页面，会呈现用户名称、头像、积分等一些条目，而本次的头像框，是正八边形的- -。 由于本菜此前并未研究过svg，canvas等绘制矢量图形的东西，当拿到设计稿之初，脑海里浮
css如何制作八边形
weixin_30752377的博客
04-17 780
随着技术的发展，css也越发强大，css可以制作很多有趣的图形，让我们一起来看一下如何使用css制作一个八边形吧。 方法/步骤 1新建一个html文件。如图： 在html文件上创建一个div标签，然后给这个标签添加一个id，后面的样式设置就是对这个id进行设置。 代码：&...
【CSS】八边形
weixin_39415598的博客
01-25 596
微信订阅号：rabbit_svip 做八边形效果，也是像【CSS】平行四边形 这个笔记里讲的那样，用transform属性，旋转内容。 微信订阅号：rabbit_svip HTML代码 <figure> <img src="images/timg5.jpg" alt=""> </figure&g...
网页中的八边形，利用css
weixin_33802505的博客
05-02 236
<div class="outer"> <div class="inner"></div> </div> 复制代码body { padding: 50px; } .outer, .inner { height: 100px; width: 100px; background-color: red; } .inn...
css做正八边形
stone10086的博客
08-04 2656
用css样式实现，八边形图片有边框并边框和图片有间距的，请多多指教 css部分.pictrue{ 　　box-sizing: border-box; 　　position: relative; 　　width: 400px; 　　height: 400px; 　　transform: rotate(45deg); 　　overflow: hidden; } .pictrue .item{ 　　bo
纯css绘制几何图形
05-15
本文将深入探讨如何使用纯CSS绘制各种几何图形，包括三角形、圆形（半圆、1/4圆）以及多边形（平行四边形、梯形、五边形、六边形、八边形）。 首先，让我们从最简单的形状——三角形开始。在CSS中，我们不能直接...
CSS_shape.zip_CSS 绘制图形
09-21
7. `shape_octagon.html`：八边形是另一种多边形，通过调整边框宽度和角度，可以构造出不同的多边形形状。 8. `shape_yin_yang.html`：阴阳符号是东方哲学的重要元素，使用CSS可以创建出具有黑白双色和半圆形状的...
地图代数八边形距离变换
05-21
八边形距离变换是一种特殊类型的距离变换方法，适用于地理空间数据，尤其是处理不规则形状的地理对象时。在这个场景下，我们将深入探讨地图代数八边形距离变换的原理、实现方法以及相关应用。 八边形距离变换源于对...
1个div，你能用CSS常规属性绘制：正3、4、5、6、7、8边形吗？
weixin_45552104的博客
08-31 563
**一、正三角形** 正三角形不需要用到伪元素，只需要设定div本身的边框宽度即可产生，先来看一下正三角形的边长与中线，若边长为100px，则中线四舍五入就是87px（100 x sin（ 60）= 87）。 因此我们要将div的长宽都设为0，接着把底部border的宽度设为为87px，左右的border width度设为50px（颜色设为透明），就可以做出一个漂亮的三角形。 .a{ w...
css做八边形图片有边框
weixin_30522095的博客
06-15 837
用css样式实现，八边形图片有边框并边框和图片有间距的，请多多指教css部分 .pictrue{ 　　box-sizing: border-box; 　　position: relative; 　　width: 400px; 　　height: 400px; 　　transform: rotate(45deg); 　　overflow: hidden; } ...
【CSS3】边角 border-radius
iuukai
07-20 1697
1. border-radius 是一个复合（简写）属性 边类型样式都有上右下左边之分，唯独边角不同，它以左上、右上、右下、左下之分；换句话说，即，代表着边的两端。 border 是 border-top、border–right、border-bottom、border-left 的简写；border-radius 则为 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left
html前端之css绘制形状
菲宇运维
07-29 853
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。 Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { width: 200px; height: 100px; backg
HTML+CSS盒子模型
m0_49553751的博客
09-17 208
属性名：border-方位名词（bd+方向名词首字母）內减模式：box-sizing:border-box。属性值：边框线粗细 线条样式 颜色 （不去区分顺序）手动做减法，减掉border/pading的尺寸。solid--线条样式。dottted--点线。dashed--虚线。
用CSS绘制最常见的40种形状和图形
最新发布
2401_84091468的博客
04-18 1038
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题女性身体可视化修身工具总结来说，面试成功=基础知识+项目经验+表达技巧+运气。
CSS3实现32种基本图形
細水、長流√的专栏
02-23 585
CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。 这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三角形，顶右直角三角形 ，底左直角三角形 ，底右直角三角形 ，八角形，十二角形。 网页代码中用到...
纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
热门推荐
DearMorning的博客
02-18 2万+
用纯CSS画出各种图形，包括基本的圆形、椭圆、等边三角形、直角三角形、平行四边形、梯形，多边形如五边形、六边形、八边形等，以及五角星、六角星、八角星、12角星，也包括稍微复杂一点的爱心、无穷大符号、鸡蛋、食豆人、提示对话框、钻石、阴阳八卦等
css八边形边框效果
08-15
要创建一个八边形边框效果，你可以使用CSS的伪元素和transform属性来实现。以下是一个示例代码： HTML: ```html <div class="hexagon"></div> ``` CSS: ```css .hexagon { width: 100px; height: 55px; background-color: #f3f3f3; position: relative; } .hexagon:before, .hexagon:after { content: ""; position: absolute; width: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; } .hexagon:before { bottom: 100%; border-bottom: 27.5px solid #f3f3f3; } .hexagon:after { top: 100%;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值