平行四边形与梯形

最新推荐文章于 2023-12-29 20:41:18 发布
最新推荐文章于 2023-12-29 20:41:18 发布
阅读量113 收藏 1
点赞数
原文链接：http://www.cnblogs.com/h5monkey/p/6638977.html
版权

效果图

代码：

看到有的css属性定义为background:transparent。意思就是背景透明。

实际上background默认的颜色就是透明的属性。

例如如果一个元素覆盖在另外一个元素之上，而你想显示下面的元素，

这时你就需要把上面这个元素的background设置transparent。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .para {
                display: inline-block;
                color: #fff;
                padding: 0 10px;
                position: relative;
                height: 30px;
                line-height: 30px;
                margin-left: 10px;
                background: red;
            }
            .para:before {
                content: '';
                display: block;
                width: 0;
                height: 0;
                position: absolute;
                border-style: solid;
                border-width: 15px 5px;
                top: 0;
                left: -10px;
                border-color: transparent yellow deepskyblue transparent;
            }
            /*如果没有after则是一个梯形*/
            .para:after {
                content: '';
                display: block;
                width: 0;
                height: 0;
                position: absolute;
                border-style: solid;
                border-width: 15px 5px;
                top: 0;
                right: -10px;
                border-color: blue transparent transparent lawngreen;
            }
        </style>
    </head>

    <body>
        <div class="para">上海</div>
        <div class="para">北京</div>
        <div class="para">杭州</div>
    </body>

</html>

第二种方法：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1 {
                width: 20px;
                height: 20px;
                border-width: 10px;
                border-style: solid;
                border-color: red green blue brown;
            }
            
            #div2 {
                width: 0px;
                height: 0px;
                border-width: 100px;
                border-style: solid;
                border-color: red green blue brown;
            }
            
            #div3 {
                width: 0px;
                height: 0px;
                border-width: 100px;
                border-style: solid;
                border-color: red transparent transparent transparent;
                
            }
            .city{
                 display: inline-block;
                  padding: 6px 25px;
                  border: 1px solid #44a5fc;
                  color: #333;
                  transform: skew(-25deg);
            }
            .city1{
                display: inline-block;
                  padding: 6px 25px;
                  border: 1px solid #44a5fc;
                  color: #333;
                  transform: skew(-25deg);
            }
            .city1 div{
                transform: skew(25deg);
            }
        </style>
    </head>

    <body>
        <div id="div1"></div>
        <br />
        <div id="div2"></div>
        <br />
        <div id="div3"></div>
        <br />
        <span class="city">上海</span>
        <span class="city">北京</span>
        <span class="city">广州</span>
        <span class="city">杭州</span>
        <br />
        <br />
        <br />
        
        <span class="city1">
            <div>上海</div>
        </span>
        <span class="city1">
            <div>北京</div>
        </span>
        <span class="city1">
            <div>广州</div>
        </span>
        <span class="city1">
            <div>杭州</div>
        </span>
    </body>

</html>

 

转载于:https://www.cnblogs.com/h5monkey/p/6638977.html

weixin_30800987
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF绘制正N边形
09-26
原文：http://blog.csdn.net/yysyangyangyangshan/article/details/12068077
平行四边形_可自由拖拽（WPF）
CarryingQiu的博客
10-15 930
前言 从事WPF开发三年了，第一次写文章，希望以后可以继续努力。 利用周末一天多的时间写了一份操作四边形的程序，作为一个思路，可以实现任何图形的操作。 正文 1、默认状态下是一个蓝色的角，可以通过按钮生成平行四边形、生成对角线、显示长度 2、可以用鼠标拖拽绿色的点生成不同样子的平行四边形。四边形的边长、角度、对角线的长度都会动态改变 3、主要难点在于角度的计算，以及标注位置的动态改变 话不多说，直接上图（最后会附上代码的链接）： 下面就是图形自定义控件的界面实现方式，就是通过Path..
WPF的Shape（形状）、Path（路径）、Drawing（图画）、Visual（可视化对象）
LeoChaw
09-16 2593
一、Shape 1. shape作为一个继承自FrameworkElement，与其他的内容控件没什么不同。 2. 继承自Shape的类有以下几种： Rectangle、Ellipse、Line、Polyline、Polygon、Path 矩形 椭圆 直线 折线 多边形 路径 3. 路径（Path）的Data属性需要一个Geometry几何对象。 Geometry是个抽象类有以下类继承： Line...
WPF画出漂亮精美的长方形、平行四边形 WPF直接通过xaml画出漂亮的图形
weijia3624的专栏
12-29 674
XAML作为一种声明性标记语言，允许开发人员以直观、简洁的方式描述用户界面的布局和视觉元素。：Visual Studio和其他IDE提供强大的可视化设计器工具，可以直接在设计视图中通过拖拽或者直接编辑XAML代码的方式来创建和修改图形，大大提高了UI开发效率。WPF中的XAML不仅简化了图形绘制的过程，还促进了团队协作，增强了应用程序的灵活性和扩展性，使得构建功能丰富、外观精美的桌面应用程序变得更为高效便捷。：通过样式和模板，可以在XAML中为图形元素定义统一的外观和行为，方便实现界面一致性及主题切换。
基础知识（十）Blend2015 画梯形或菱形或平行四边形
xpj8888的博客
09-28 3073
选择矩形—>右击鼠标—>路径—>转化为路径—>选线如图所示的路径选择工具，并且代码变成路径数据—>移动点或线段，可以改变形状(注意：只有在Path数据下，才能通过“路径选择”工具，微调来改变图形的形状)。 ...
实现一个平行四边形
weixin_33755847的博客
02-20 552
需求如题，想了下用普通的变换如旋转、缩放、位移都是无法实现的。无奈之下谷歌，网友们提供了两个实现方式，第一个是通过border的方式，这个比较tricky；第二种方式很吸引人，原来变换中除了我上面提到的三种方式之外，还有一个skew，英文意思是歪曲，正是实现平行四边形的利器。 width: 200px; height: 100px; ba...
平行四边形制作
weixin_30483013的博客
05-02 862
转载于:https://www.cnblogs.com/agansj/p/6795183.html
WPF画刷、形状和变换学习笔记
u011626294的专栏
03-03 867
形状，画刷和变换 形状是元素： 这样会带来许多重要的结果： v 形状绘制自身。不需要管理无效的情况和绘制过程。 v 使用与其他元素相同的方式组织形状。可在任何布局容器中放置形状。 v 形状支持与其他元素相同的事件。 所有的形状类都继承自Shape类 Rectangle，Ellipse，Line，Polyline ，Polygon，Path。 Shape类的重要属性： Fill：绘
wpf scrollviewer 两个事件相互影响_WPF绘制3D效果显示密集立体集装箱
weixin_39861669的博客
12-12 120
并不是真的3D，类似以前游戏的2.5D。先上效果图。 变形一下也可以起先我是想，把这种绘图啊啥的，都做成控件，给别人直接用就行了。但是做的过程中发现。要做简单易用的控件，实在是花时间。 而且花的时间又大多数和如何绘制这个主题无关。就是一些基础性的属性，事件的东西。 现在现状是用WPF的人实在不多，所以我也真的没啥动力去做这件事。 不如抛出一种思路。 直接放个源码，有什么需求或者疑问可以联系我QQ3...
WPF几何绘图（二）画矩形
热门推荐
vevi的专栏
03-09 1万+
 绘制矩形的时候需要使用RectangleGeometry类，代码实例如下:RectangleGeometry myRectangleGeometry = new RectangleGeometry(); myRectangleGeometry.Rect = new Rect(50,50,25,25);Path myPath = new Path();myPath
WPF创建不规则形状的按钮
MirrorN的博客
06-08 1万+
    在WPF中用到不规则形状的按钮的时候一般是使用下载visual studio时自带的的blend for studio。 Blend是一款方便的UI设计工具，将它与WPF结合使用，可以实现很多静态或者动态的UI效果，在这里介绍一个简单的小应用，不规则的的按钮如何创建。 首先，创建新工程，这时候的主界面是这样的：     创建不规则形状的按钮的话，首先是用右侧的钢笔工具在设计器中画...
细数改善WPF应用程序性能的10大方法
蓝叶菱的专栏
01-05 983
引言：你也许听说过Avalon（现在被称为Windows PResentation Foundation，或WPF），也许看过相关的屏幕截图或demo，但是现在你可以亲手尝试了。让我们开始创建下一代Windows应用程序吧。 　　微软公司早在2003年洛杉矶的PDC上就公布了Avalon，他们将其视为下一代用户界面技术，并且得到了开发者和用户的一致赞同。 　　在2005年的PDC上，微软公
智慧能源智慧风场建设方案.pdf
最新发布
08-11
智慧能源智慧风场建设方案.pdf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值