Question

我有以下项目，其指向区域是使用边框创建的。我需要在这个边界上放置一个边框。我尝试使用阴影，但它无法解决问题。

＆＃13;

HashMap<String, Object> params = new HashMap<String, Object>();
params.put("recipientId", userObject.getObjectId());
params.put("message", message);
ParseCloud.callFunctionInBackground("sendPushToUser", params, new FunctionCallback<String>() {
   void done(String success, ParseException e) {
       if (e == null) {
          // Push sent successfully
       }
   }
});

＆＃13;

#hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
}
#hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;
}

＆＃13;

如果我以百分比更改<div id="hexagon">，border-left或border-right的值，则无法正常工作。

编辑：

这是我想要实现的目标。顶部为矩形的白色区域在底部向下指向并具有不同颜色的边框。

Answer 1

您无法直接添加边框，但您可以使用不同的伪元素偏移1px以相同的方式构建边框。在这里，我创建了一个位于红色形状下的黑色形状，向下1px。

＆＃13;

#hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
border:1px solid black;
}
#hexagon:after, #hexagon:before {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;
}
#hexagon:before {
  bottom: -26px;
  border-top-color: black;
}

＆＃13;

<div id="hexagon"></div>

＆＃13;

Answer 2

正如安迪所说，通常的诀窍是创造相同的形状更大一点，或转移到某一方。

但是，您应该考虑角度。例如，考虑左边缘。如果新的“边框”向左开始10px，边框宽度将看起来像10px。

但现在考虑对角线边缘，让我们考虑它有45度的斜率。如果向左开始10px，人眼将计算垂直方向的边框宽度，因此它将为7.07px。如果你向左开10px而向下开10px，现在它将是14.14px。

所以这不能正确扩展。在某些情况下，您可以使用三角学数学来完成它，但它可能会变得复杂。

相反，解决方案是：使用SVG 。

Answer 3

我已调整您的代码以使用第二个伪元素并将其定位比前一个稍低一些。

＆＃13;

Imports System.Reflection

Public Class Form1
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles Me.Load

        Dim list As New List(Of HandlerInfo)
        list.Add(New HandlerInfo() With {.EventName = "Click", .HandlerName = "mysub"})
        list.Add(New HandlerInfo() With {.EventName = "MouseEnter", .HandlerName = "mysub"})
        list.Add(New HandlerInfo() With {.EventName = "MouseLeave", .HandlerName = "mysub"})

        For Each info As HandlerInfo In list
            Dim eventName As String = info.EventName 'Use local variables, rather that the iterator, or else the wrong object will get captured and it won't work correctly.
            Dim handlerName As String = info.HandlerName

            Dim dynamicEventInfo As EventInfo = Button1.GetType.GetEvent(eventName)
            dynamicEventInfo.AddEventHandler(Button1, New EventHandler(Sub(sender2 As Object, e2 As EventArgs)
                                                                           Dim t As Type = GetType(Form1) 'This is the type of the object that contains the handler
                                                                           Dim i As Object = Me 'This is the instance of "t" that the handler should be invoked on
                                                                           Dim handler As MethodInfo = t.GetMethod(handlerName)
                                                                           handler.Invoke(i, New Object() {sender2, e2, eventName})
                                                                       End Sub))
        Next
    End Sub

    Private Class HandlerInfo
        Public Property EventName As String
        Public Property HandlerName As String
    End Class

    Public Sub mysub(sender As Object, e As EventArgs, eventName As String)
        Debug.WriteLine(eventName)
    End Sub
End Class

＆＃13;

findShorterWay = function(){
    var tmpStationArray = [];
    origin = document.getElementById('shorterWays').value;
    var service = new google.maps.DistanceMatrixService;
    if (origin) {
        for (var i = 0; i < stationNameArray.length; i++) {
            var destination = {lat: stationNameArray[i].lat, lng: stationNameArray[i].lng};
            var request = {
                origins: [origin],
                destinations: [destination],
                travelMode: 'DRIVING',
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            };
            service.getDistanceMatrix(request, (function(i) { // this function takes an input parameter i
                // return a new function with locally scoped i
                return function(response, status) {
                    if (status == google.maps.DistanceMatrixStatus.OK) {
                        // the value of i locally scoped (not from the loop variable)
                        stationNameArray[i].distance = response.rows[0].elements[0].distance.value;
                        var adress = response.destinationAddresses[0];
                        var distance = response.rows[0].elements[0].distance.value;
                        tmpStationArray.push({adress:adress,distance:distance});
                        if (tmpStationArray.length === stationNameArray.length) {
                            var min =findMin(tmpStationArray);
                            itinerateMe(origin, tmpStationArray[min].adress);
                        }
                    }
                }
            })(i)); // pass the loop variable to the function
        }
    }
}

＆＃13;

如何在边框添加边框？

3 个答案: