html代码设置五边形,所需的五边形形状,正确的方向CSS和HTML

你可以直接使用svg.

您可以使用svg的clipPath和foreignObject将div导入svg元素并应用内联clipPath以支持跨浏览器.

div {

width: 150px;

height: 150px;

background: #4275FF;

}

使用图像而不是纯色.

或者,您可以在：after：pseudo-element上使用三角形.

div {

position: relative;

width: 125px;

height: 150px;

background: #4275FF;

}

div:after {

content: '';

position: absolute;

width: 0;

height: 0;

border-top: 75px solid transparent;

border-bottom: 75px solid transparent;

border-left: 25px solid #4275FF;

right: -25px;

}

使用CSS添加图像而不是纯色.

#main-container {

width: 150px;

height: 150px;

overflow: hidden;

}

#container,#shape {

position: relative;

width: 200px;

height: 195px;

transform: rotate(-20deg) translate(-46px,-40px);

overflow: hidden;

-webkit-backface-visibility: hidden;

}

#shape {

position: relative;

height: 500px;

transform: rotate(40deg) translateY(-50%);

left: -219px;

top: 112px;

}

#shape:after {

position: absolute;

content: '';

width: 150px;

height: 150px;

background: url(http://lorempixel.com/150/150);

transform: rotate(-20deg);

margin: 70px 0 0 52px;

}

html代码设置五边形,所需的五边形形状,正确的方向CSS和HTML相关推荐

Java黑皮书课后题第6章：6.35（几何：五边形的面积）五边形的面积可以用如下公式计算。编写一个方法，使用下面的方法头返回五边形面积。编写一个主方法，提示用户输入五边形的边，然后显示它的面积
6.35(几何:五边形的面积)五边形的面积可以用如下公式计算.编写一个方法,使用下面的方法头返回五边形面积.编写一个主方法,提示用户输入五边形的边,然后显示它的面积题目题目描述与运行示例破题代 ...
前端基础建设与架构10 代码拆分和按需加载：缩减 bundle size，把性能做到极致
这一讲,我们将对代码拆分和按需加载这一话题进行解析. 随着 Webpack 等构建工具的能力越来越强,开发者在构建阶段可以随心所欲打造项目流程,代码拆分和按需加载技术在业界曝光量也越来越高.事实上,代 ...
ssh 免密码登录（设置后仍需输密码的原因及解决方法）
ssh 免密码登录(设置后仍需输密码的原因及解决方法) 参考文章: (1)ssh 免密码登录(设置后仍需输密码的原因及解决方法) (2)https://www.cnblogs.com/guanyf/p ...
android 代码设置键盘适应_Android自适应软键盘的Dialog以及监听软键盘弹起
最近项目中遇到一个需求:新手引导.跟一般的新手引导没有什么太大区别,思路都是搞一个带阴影的遮罩层,然后在上边儿给一些提示性的文字,由于需求中有些特殊的地方,所以我用了一个全屏的dialog(而且,di ...
android 代码设置EditText的hint字符
今天,简单讲讲android里如何在代码里设置 EditText的hint字符. 之前,我一般是直接在xml文件设置EditText 的hint字符,后来需要在代码里修改hint字符,发现自己居 ...
eslint 无法格式化ts_vscode保存代码，自动按照eslint规范格式化代码设置
vscode保存代码,自动按照eslint规范格式化代码设置编辑器代码风格一致,是前端代码规范的一部分.我们现在前端绝大部分都在使用eslint,或者将要把代码改为eslint,那么此时我们怎么方便 ...
ios 代码设置控件宽高比_iOS--利用比例纯代码适配屏幕大小
首先说下让自己的程序支持iPhone6和6+,第一种使用官方提供的launch screen.xib,这个直接看官方文档即可,这里不再多述:第二种方法是和之前iPhone5的类似,比较简单,为iPho ...
编辑器eslint格式_vscode保存代码，自动按照eslint规范格式化代码设置
vscode保存代码,自动按照eslint规范格式化代码设置编辑器代码风格一致,是前端代码规范的一部分.同一个项目,或者同一个小组,保持代码风格一致很必要.就拿vue项目来说,之前做的几个项目,很多 ...
android设置屏幕高度和宽度设置,Android手机的屏幕宽高度和代码设置控件的宽高度...
1.Android手机的屏幕宽高度 WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE); int w ...

html代码设置五边形,所需的五边形形状,正确的方向CSS和HTML

html代码设置五边形,所需的五边形形状,正确的方向CSS和HTML相关推荐

最新文章

热门文章